HTML & CSS Tip of the Week

One corner, two border radii

Published on

When we declare a border radius, like border-radius-top-left: 20px, we’re declaring the radius of a circle, which the border follows.

We are able to provide two values, though, and when we do that, we’re providing the two axis for the radius of an ellipse.

We’re able to do this using the border-radius shorthand as well, using a / to separate the two values like so:

.strange-shape {
  border-radius: 50px 120px 75px 10px / 100px 10% 30px 100px;
  
  /* same as */
  border-top-left-radius: 50px 100px;
  border-top-right-radius: 120px 10%;
  border-bottom-right-radius: 75px 30px;
  border-bottom-left-radius: 10px 100px;
}

This can be useful for times when you need more of a blob shape.

See the Pen CSS blobs by Kevin (@kevinpowell) on CodePen.

These aren’t always the easiest to make by hand, but you can use this generator to help.

Dive deeper