CSS Tip

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*/

  border-image: 
    radial-gradient(
          #0000 calc(71% - var(--b)),
       var(--c) calc(72% - var(--b))
     ) 49.9%/var(--r);
}

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.

Related: smashingmagazine.com/2024/01/css-border-image-property/