Skip to main content

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;
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: