In CSS we have the attribute border-radius .
Usually use the following forms:
border-radius:10px;
border-radius:10px 20px 20px 10px;
But I came across the following code one of these days and until today I'm not understanding what it is for.
div {
border-radius: 100px/55px;
background-color:#333;
height:100px;
}<div></div> What does this bar mean by border-radius ?
The bar is used to specify two different radii for curvature.
border-radius: 40px / 20px;
horizontal --^ ^-- vertical
Thesamesyntaxcanbeusedtospecifythefourcorners.
NoticethedifferenceforChrome:
#element {
border-radius: 80px 70px 60px 50px / 30px 20px 10px 5px;
background-color:blue;
width:200px;
height:100px;
}<div id="element">
</div>This avoids having to write everything separate:
#element {
-webkit-border-top-left-radius: 80px 30px;
-webkit-border-top-right-radius: 70px 20px;
-webkit-border-bottom-right-radius: 60px 10px;
-webkit-border-bottom-left-radius: 50px 5px;
border-top-left-radius: 80px 30px;
border-top-right-radius: 70px 20px;
border-bottom-right-radius: 60px 10px;
border-bottom-left-radius: 50px 5px;
background-color:blue;
width:200px;
height:100px;
}<div id="element">
</div>The MDN documents these properties well. The top image of the response came from SitePoint, which has an article speaking about.
The "/" sign on the border-radius works as follows: declares the values of the horizontal axis clockwise, and then the values of the vertical axis, also separated by a slash:
border-radius: 10px 20px 5px 20px / 5px 5px 20px 10px;
This example would look like this:
#border{
width:300px;
height:100px;
background:#000;
border-radius: 10px 20px 5px 20px / 5px 5px 20px 10px;
}<div id="border">
</div>You can also use the properties:
border-radius-topleft
border-radius-topright
border-radius-bottomright
border-radius-bottomleft
That are self explanatory, define borders in specific places of the div or whatever you are styling.
This site brings an interesting article about borders.