The new CSS `corner-shape` property breaks away from the uniform rounded corners dictated by the `border-radius` rule, allowing developers to directly define various geometric shapes such as squircle, bevel, scoop, notch, and square. Working alongside `border-radius`, this feature aims to solve UI workarounds of the past—which required complex SVG masks, `clip-path` usage, or multiple background images—using pure code.
Supported Values and Syntax
The `corner-shape` property does nothing on its own; it acts as a companion to modify the shape of the curve generated by `border-radius`. The core values accepted by the property are:
- `round`: Preserves the standard `border-radius` appearance (default value).
- `squircle`: Creates super-elliptical, soft-cornered squares frequently seen in the Apple ecosystem.
- `bevel`: Connects corners with a sharp straight line to give a chamfered look.
- `scoop`: Creates inwardly curved (concave) corners.
- `notch`: Cuts sharp inward notches.
- `square`: Flattens and overrides rounded corners entirely.
Furthermore, just like `border-radius`, individual values can be assigned to each corner (`corner-shape: bevel round scoop squircle;`), or precise mathematical control can be achieved using the `superellipse()` function.
Design and Performance Advantages
In past years, achieving different corner shapes in web interfaces required using `clip-path` or SVG masks. However, these legacy methods came with distinct disadvantages: clipped shadows, borders failing to follow the masks, and code easily breaking when padding values were altered.
Because the `corner-shape` property can directly target not just borders, but also outer shadows (`box-shadow`), backgrounds, and outline structures, it eliminates this technical debt. The feature is supported in Chrome 139 and later Chromium-based browsers. Until browser support becomes widespread, it can be safely used via a progressive enhancement approach—falling back on standard `border-radius` and gradient masks while delivering an advanced experience in browsers that support `corner-shape`.
Frequently Asked Questions
Will using `corner-shape` break our existing `border-radius` code?
No, it will not. `corner-shape` does not replace existing `border-radius` values; it complements and shapes them. If a browser does not support the property, the element will simply continue to render with the standard `border-radius` appearance.
How should `corner-shape` be backed up (fallback) in projects for older browsers?
For environments lacking browser support, standard `border-radius` or traditional `clip-path` methods should be used as the baseline style, with `corner-shape` added to the codebase as a progressive enhancement layer.
*This news article was prepared based on data published by Smashing Magazine.
💬 Comments
No comments yet. Be the first!
You must be logged in to comment.
🔑 Log In