|<<>>|5 of 234 Show listMobile Mode

TIL CSS border-radius lets you define ellipses

Published by marco on

I hadn’t ever really thought about it because I don’t use the API very much, but it turns out that the border-radius property is not only a shorthand for setting all four corners at once, but also sets the horizontal and vertical lengths simultaneously. To set them individually, use a / between two values.

The corner radii are then calculated using ellipses as shown in the following visualization,

 Border-Radius with ellipses

The article CSS Border-Radius Can Do That? by Nils Binder on October 9, 2018 (9 elements) has many more examples. It also introduces a Fancy-Border-Radius tool to help you create the desired shape visually.

 Sample border-radius setting with rendering

CSS includes the much more generalized shape() API (MDN)[1], but it wouldn’t be as easy to define the “blobs” shown above with that API because the “blob” is defined by the intersection of four overlapping ellipses and the shape() API doesn’t allow combining multiple shapes into one shape.

Not only that, but the fact that the “blob”, as defined by the eight values shown above, can be quite easily animated by providing the end “blob” to a transition or by providing several “blobs” to tweenable @keyframes. You can see the technique in action in this CodePen. Scroll all the way down in the CSS definition to see that the effect uses a combination of morphing the border-radius and rotating using a transform to achieve a quite-complex and organic effect using only very straightforward and highly available CSS.

@keyframes morph {
  0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 
  100% {border-radius: 40% 60%;} 
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}


[1]

You can even use “tricks” to create many shapes without using the shape() API either. See The Shapes of CSS by Chris Coyier (CSS-Tricks) for many, many examples.