CSS Tip

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: css-generators.com/custom-corners

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: css-tricks.com/cut-corners-using-css-mask-and-clip-path-properties

More CSS Tips