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
- One Property
- One Gradient
Use an online generator to easily get the code: css-generators.com/custom-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
- How many elements your container has? Detect the number of elements inside a container using :has() selector.
- A CSS-only wavy shapes Combine gradients and CSS mask to create a wavy shape with a little of code.
- A fancy title divider II Use clip-path and border-image to create a fancy title divider.
- A fancy title divider Use background and border-image to create a fancy title divider.