Skip to main content

An inner border-radius with one property

Do you want to have a radius inside the element but not outside? You can do it using only one property 🤩

A box with an inner border-radius

.box {
--c: orange;
--r: 50px; /* control the inner radius */
--b: 15%; /* control the border thickness*/

#0000 calc(71% - var(--b)),
var(--c) calc(72% - var(--b))
) 49.9%/var(--r);

I may have an article to explain the logic behind the different values.

See the Pen Inner border-radius by Temani Afif (@t_afif) on CodePen.

There are easier way to achieve the same result with more properties and accurate values but I wanted to share this magic one-property trick.