With this property, we can not only make rounded corners but also circles, ellipses, and other interesting shapes.
I admit that the term "rounded corners" is far less obscure than "border radius".
The
border-radius
CSS property allows us to make rounded corners on almost any HTML element, and it looks like this:
border-radius: 20px;
The border-radius
attribute is also the shorthand syntax for the border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
, and border-bottom-left-radius
properties.
Using either a circle or an ellipse, we can create rounded corners:
There are two values: a length value and a percentage value.
This is when we use percentages such as 50%
, 85%
, and so on.
We can use, one, two, three, or four values in the same declaration. We can also use a slash symbol, "/
", to separate groups of values.
CSS:
/*Longhand*/ .element { border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } /*Shorthand*/ .element { border-radius: 20px; } /*Two values: top-left-and-bottom-right - top-right-and-bottom-left*/ .element-1 { border-radius: 70px 7px; } /*Three values: top-left - top-right-and-bottom-left - bottom-right*/ .element-2 { border-radius: 70px 7px 20px; } /*Four values: top-left - top-right - bottom-right - bottom-left*/ .element-3 { border-radius: 70px 7px 20px 150px; } /*Values divided with a slash "/" symbol */ .element-4 { border-radius: 70px 7px/20px 30px; } /*Circle*/ .element-5 { border-radius: 200px; } /*Ellipse*/ .element-6 { height: 100px; border-radius: 100%; } /*Pill*/ .element-7 { height: 100px; border-radius: 100px; } /*Half Pill: top-left - top-right - bottom-right - bottom-left*/ .element-8 { height: 100px; border-radius: 100px 0 0 100px; }
Here is a demo in CodePen: http://tiny.cc/css-border-radius
18.219.34.62