Border radius

Everything is a box, but who says boxes can’t have round corners?

We can round the corners of any element using border-radius.

.rouded-corners {
  border-radius: 12px;
}

no border radius

with border radius

It’s a shorthand

The border-radius property is a shorthand, declaring the border-radius for every corner.

Like with margin, padding, and border, we can use a space separated list to have different amounts on each corner, or you can use the longhand to target only a specific corner.

/* four values starts in the top left, then goes clockwise*/
.four-values {
  border-radius: 10px 20px 30px 40px;
}

/* the first value is top-left and bottom-right */
/* the second value is the top-right and bottom-left */
.two-values {
  border-radius: 10px 30px;
}

/* the first value is the top left */
/* the second value is the top right and bottom left */
/* the third value is the bottom right*/
.three-values {
  border-radius: 10px 30px 90px;
}

See the Pen border-radius by Kevin (@kevinpowell) on CodePen.

Circles and pills

One of my favorite lines of CSS is border-radius: 100vw. This makes the radius much bigger than the element will ever be. If an element is a square, you’ll get a circle. If the element is not a square, you’ll get a pill shape.

`corner-shape`

When using border-radius, we can now change the shape of the corner as well, creating notched corners, bevels, squircles, and more. As of the time of release of this course, browser support is limited, but it’s going to open up a lot of new possibilities!

Amit Sheen has a fantastic article on the Frontend Masters blog exploring how it works, and the new possibilities it opens up.