CSS3 Border Radius Property – CSS

title: CSS3 Border Radius Property

CSS3 Border Radius Property

With CSS3, you can give any element “rounded corners”, by using the border-radius property. The value can be in any valid CSS length unit.

.rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }

Note: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

If just one value provided, the border-radius will be the same for all four corners, as in the examples above. But you also have the option to specify different values for each corner.

.new-shape { border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ }

If only two values are provided, the first value applies to the top-left and bottom-right corner, and the second value applies to the top-right and bottom-left corner.

.leaf-shape { border-radius: 0 50%; }

If three values are set, the first again applies to the top-left radius, the second value indicates top-right and bottom-left, leaving the third value to indicate the bottom-right corner.

.odd-shape { border-radius: 0 20px 50%; }

The rounding of a corner does not have to be perfectly symmetrical. You may specify both the horizontal and vertical radiuses using a slash (“/”) to achieve a corner with an elliptical shape.
.elliptical-1 {
border-radius: 50px/10px; /* horizontal radius / vertical radius */
.elliptical-2 {
border-radius: 10px/50px;

![examples](https://github.com/kaithrendyle/guide-photos/blob/master/elliptical-basic.png?raw=true) Since only one pair of values is given in the above examples, all four corners are the same. But, of course, if you want a more complex shape, you may supply up to four values for the horizontal radiuses and four for the vertical radiuses.

.elliptical-3 {
border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */

Notice how the shorthand above produces the same result as specifying individual properties below. Be aware that when corners are set individually the values are space-separated instead of slash-separated.

.elliptical-4 {
border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */
border-top-right-radius: 20px 50px;
border-bottom-right-radius: 50px 20px;
border-bottom-left-radius: 20px 50px;

More Information:

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.