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.