CSS Tip

Inverted border-radius using CSS mask

Use CSS mask to create an inverted radius corner with a minimal code.

CSS-only inverted border-radius

img {
  --r: 25px; /* the radius */
  --s: 40px; /* the size of the corner*/
  
  width: 200px;
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    right calc(var(--s) + var(--r)) top var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) 
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)),
     #0000 25%,#000 0);
}

See the Pen Inverted border-radius using CSS mask by Temani Afif (@t_afif) on CodePen.

More CSS Shapes: css-shape.com

More CSS Tips