Skip to main content

Cut the corners of your element

How much code is needed to cut the four corners of an element? Also known as inverted border-radius

Use an online generator to easily get the code:

An element with 4 cut corners

.corner {
--s: 60px; /* control the radius of the cut */
mask: radial-gradient(var(--s) at var(--s) var(--s),#0000 98%,#000) calc(-1*var(--s)) calc(-1*var(--s));

See the Pen CSS Only cut corners by Temani Afif (@t_afif) on CodePen.

More detail: