I hadn't ever really thought about it because I don't use the API very much, but it turns out that the <c>border-radius</c> property is not only a shorthand for setting all four corners at once, but <i>also</i> sets the horizontal and vertical lengths simultaneously. To set them individually, use a <c>/</c> between two values. The corner radii are then calculated using ellipses as shown in the following visualization, <img src="{att_link}border-radius-6.png" href="{att_link}border-radius-6.png" align="none" caption="Border-Radius with ellipses" scale="50%"> The article <a href="https://9elements.com/blog/css-border-radius/" author="Nils Binder" source="9 elements" date="October 9, 2018">CSS Border-Radius Can Do That?</a> has many more examples. It also introduces a <a href="https://9elements.github.io/fancy-border-radius/#51.30.20.25--.">Fancy-Border-Radius tool</a> to help you create the desired shape visually. <img src="{att_link}screen_shot_2021-12-26_at_09.07.12.png" href="{att_link}screen_shot_2021-12-26_at_09.07.12.png" align="none" caption="Sample border-radius setting with rendering" scale="50%"> CSS includes the much more generalized <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes" source="MDN"><c>shape()</c> API</a><fn>, 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 <c>shape()</c> 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 <i>animated</i> by providing the end "blob" to a <c>transition</c> or by providing several "blobs" to tweenable <c>@keyframes</c>. You can see the technique in action in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">this CodePen</a>. Scroll all the way down in the CSS definition to see that the effect uses a combination of morphing the <c>border-radius</c> and rotating using a <c>transform</c> to achieve a quite-complex and organic effect using only very straightforward and highly available CSS. <code> @keyframes morph { 0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 100% {border-radius: 40% 60%;} } @keyframes spin { to { transform: rotate(1turn); } } </code> <hr> <ft>You can even use "tricks" to create many shapes without using the <c>shape()</c> API either. See <a href="https://css-tricks.com/the-shapes-of-css/" author="Chris Coyier" source="CSS-Tricks">The Shapes of CSS</a> for many, many examples. </ft>