Border radius

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".

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;

Description

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.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

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.

Tip

Sometimes, the background color or texture "bleeds" over the rounded corners in some browsers. Use background-clip to fix this issue.

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 pided 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