We’ve already covered how to use CSS3’s border-radius property, but what we haven’t covered is how to use a particular syntax when defining your border-radius values. If you’re a practiced web developer, you may have come across instances of the border-radius property where there’s a forward slash (“/”) separating some of the values.
As you might know, the border-radius property allows you to define if you want the corners of the borders of your elements to be rounded, and just how rounded you want them to be. The values are usually defined in pixels (px) or percentages (%). When you see a forward slash separating any of the values, it indicates that the numbers in front of the slash represent the horizontal border-radius values, while the values after the slash represent the vertical border-radius values.
So for example, let’s say your code looked like this:
div{
border-radius: 20px / 30px;
}
The first value (20px) would represent the horizontal border-radius value. If you don’t know what this means, it helps to imagine a circle in the corner of your element. Now imagine that circle with a horizontal radius that goes through the center of the circle. Now imagine a vertical radius that cuts through the center of the circle. These two radii have split your shape up into four quarters. The horizontal border-radius value will effect the quarter that is closest to the border corner in question, and the vertical-radius value (after the slash) will be applied to the quarter just below (or above, depending on which corner you’re applying your code to) it. The two quarters that are farthest from the border are not effected.
In the code example above, the values before and after the slash apply to all the corners. If you want to use the slash/syntax but want to make each corner have different values, you can do so like this:
div{
border-radius: 10px 20px 30px 10px / 30px 40px 20px 10px'
}
So the first value applies to the horizontal top left corner, then horizontal top right, horizontal bottom right, horizontal bottom left. After the slash, the values correspond to the vertical top left, vertical top right, vertical bottom right, and vertical bottom left.