The corner-shape property in CSS offers unique design possibilities. This includes designs like vintage tickets with inward-trimmed corners, sci-fi corners, and tags, typically associated with the CSS property corner-shape.
With corner-shape, we have various primitive keywords like round (default), bevel, scoop, squircle, and the versatile superellipse(). Creating interesting shapes, usable beyond corner decorations, is straightforward.
Consider patterned backgrounds.
Note: If corner-shape isn’t supported by a browser, you can choose to keep or remove the default rounded corners from border-radius.
This can be done using CSS @supports like:
@supports not (corner-shape: notch) {
}Code language: CSS (css)