CSS corner-shape: Goodbye Boring Corners
The Eternal Corner Problem
Weve been stuck with border-radius for what feels like forever. Rounded corners? Easy. Perfect circle? border-radius: 50% done. But try to make something interesting - an Apple-style squircle, a hexagon, beveled edges - and suddenly youre knee deep in SVG paths, clip-path coordinates, or stacking pseudo-elements like some kind of CSS archaeologist reconstructing ancient artifacts.
I once spent four hours trying to make a button look like the iOS app icons. Four hours. For a button. I ended up using a PNG because I ran out of patience and my designer was asking why it was taking so long. Not my proudest moment.
But someone at the CSS Working Group finally decided to help us out. Meet corner-shape, the property that shouldve existed in 2010.
The concept is simple: border-radius controls the size of the corner, corner-shape controls the shape. They work together. Like salt and pepper, or me and coffee after midnight when I’m debugging CSS.
.element {
border-radius: 30px;
corner-shape: squircle;
}Two lines. Thats a squircle. No SVG, no hacks, no selling your soul.
The spec lives in CSS Borders and Box Decorations Level 4, still Editor’s Draft but Chrome and Edge already support it. More on browser support later.
Values and Syntax
corner-shape uses keywords that map to something called a superellipse. If you remember anything from math class (I barely do), the superellipse equation is:
$|x/a|^n + |y/b|^n = 1$
Where n is what determines the curve. The CSS keywords are shortcuts to specific n values. You dont need to remember this, but its useful if you want to understand why the curves look the way they do.
round (n=1) - The default. Quarter-circle arc, same as normal border-radius. Nothing new here.
squircle (n=2) - This is the one everyone wants. The Apple curve. More gradual than a circle, tightens toward the edges. iOS icons, MacOS buttons, everything Apple uses this. The reason it looks “smoother” is that the curvature derivative is continuous at the tangent points. I had to look that up.
bevel (n=0) - Straight diagonal line. The corner becomes a 45-degree chamfer. Useful for industrial/techy looks.
scoop (n=-1) - The curve goes inward instead of outward. Concave quarter-circle. Weird but sometimes thats what you need.
notch (n=-infinity) - Two perpendicular lines meeting at a right angle pointing inward. Like someone took a rectangular bite out of your element.
square (n=infinity) - Cancels the border-radius entirely. Seems useless but its essential for animations - you can transition smoothly from square to any other value.
.round { corner-shape: round; }
.squircle { corner-shape: squircle; }
.bevel { corner-shape: bevel; }
.scoop { corner-shape: scoop; }
.notch { corner-shape: notch; }
.square { corner-shape: square; }The superellipse() function
If the keywords arent enough, use superellipse(n) directly with any number:
.gentle-squircle {
border-radius: 40px;
corner-shape: superellipse(1.5);
}
.aggressive-squircle {
border-radius: 40px;
corner-shape: superellipse(3);
}Quick reference:
- 0 < n < 1: Sharper than a circle but still convex
- n = 1: Perfect circle (same as
round) - 1 < n < 2: Getting flatter, approaching squircle territory
- n = 2: The squircle
- n > 2: More and more rectangular
- n < 0: Concave curves
- n approaching infinity: Approaches
square
Multi-value syntax
You can set different shapes for each corner. Same order as padding/margin: top-left, top-right, bottom-right, bottom-left.
.mixed-corners {
border-radius: 30px;
corner-shape: round bevel notch squircle;
}1 value = all corners. 2 values = top-left/bottom-right, top-right/bottom-left. 3 values = top-left, top-right/bottom-left, bottom-right. 4 values = each corner individually.
Individual corner properties
For when you need maximum control:
.granular-control {
border-radius: 30px;
corner-top-left-shape: squircle;
corner-top-right-shape: bevel;
corner-bottom-right-shape: round;
corner-bottom-left-shape: notch;
}Theres also logical properties for RTL layouts:
.logical-corners {
border-radius: 30px;
corner-start-start-shape: squircle;
corner-start-end-shape: bevel;
corner-end-start-shape: round;
corner-end-end-shape: notch;
}Interactive demo
Play with this slider to see how superellipse() transforms corners in real time. Needs Chrome 139+ or Edge 139+ - if youre on Firefox or Safari youll just see a normal rounded box.
corner-shape: squircle;
Practical examples
Alright enough theory. Lets make some stuff.
Discount tag
Mixing different corner shapes on one element:
.discount-tag {
background: #dc2626;
color: white;
padding: 8px 16px;
border-radius: 10px 10px 10px 50%;
corner-shape: round bevel bevel round;
}The beveled bottom corners give it that “cut” look while the top stays soft. Used to need pseudo-elements for this.
Geometric shapes
No clip-path, no SVG, no pseudo-elements. Just CSS.
Hexagon:
.hexagon {
width: 200px;
aspect-ratio: cos(30deg); /* ~0.866 */
background: #3b82f6;
border-radius: 50% / 25%;
corner-shape: bevel;
}The cos(30deg) aspect ratio gives correct hexagon proportions. The elliptical border-radius positions the tangent points, bevel connects them with straight lines. I had to think about this one for a while but once it clicks it makes sense.
Octagon:
.octagon {
width: 200px;
aspect-ratio: 1;
background: #22c55e;
border-radius: 30%;
corner-shape: bevel;
}Easier than hexagon. The 30% determines how much of each corner gets beveled.
Diamond:
.diamond {
width: 150px;
aspect-ratio: 1;
background: #f59e0b;
border-radius: 50%;
corner-shape: bevel;
transform: rotate(45deg);
}Isometric cube effect:
.cube {
width: 100px;
height: 100px;
background: #9333ea;
border-radius: 0 30px;
corner-shape: bevel;
border-right: 30px solid rgba(0, 0, 0, 0.25);
border-bottom: 30px solid rgba(0, 0, 0, 0.5);
}The dark borders on right and bottom fake depth. Cool trick.
Animations
corner-shape is animatable. The browser converts keywords to superellipse() values and interpolates between them.
.animated-button {
border-radius: 50px;
corner-shape: round;
transition: corner-shape 0.3s ease;
}
.animated-button:hover {
corner-shape: squircle;
}For keyframes:
@keyframes morph {
0% { corner-shape: square; }
25% { corner-shape: round; }
50% { corner-shape: squircle; }
75% { corner-shape: scoop; }
100% { corner-shape: notch; }
}
.morphing-box {
border-radius: 50px;
animation: morph 4s ease-in-out infinite;
}Transitioning from round (n=1) to squircle (n=2) passes through all intermediate curves smoothly. Pretty satisfying to watch.
Browser support
As of December 2025:
| Browser | Support |
|---|---|
| Chrome 139+ | Yes |
| Edge 139+ | Yes |
| Chrome Android 142+ | Yes |
| Firefox | No |
| Safari | No |
About 65-66% global coverage. Not great but not terrible for a new feature.
Good news: corner-shape degrades gracefully. Unsupported browsers just ignore it and show normal border-radius. Nothing breaks.
.card {
border-radius: 20px;
corner-shape: squircle;
}Chrome gets the squircle. Safari gets normal rounded corners. Both work fine.
If you want conditional styling:
@supports not (corner-shape: squircle) {
.card {
/* fallback styles */
}
}But honestly most of the time you dont need a fallback. Normal rounded corners are fine.
The bottom line
Before corner-shape we had SVG (flexible but complex), clip-path (clips borders and shadows too), pseudo-elements (hackery), or images (dont scale, extra HTTP requests).
Now its one CSS property. Borders, shadows, backgrounds all follow the shape automatically. Fully animatable. No performance overhead.
CSS keeps getting better. We dont need SVG or JavaScript for visual effects that should be native. A hexagon shouldnt require calculating polygon coordinates. A button that looks like an iOS icon shouldnt take four hours.
Once Firefox and Safari catch up this will probably be as common as border-radius itself.
References
- CSS Backgrounds and Borders Level 4
- MDN - corner-shape
- CSS-Tip: Corner Shape Demos
- Can I Use - corner-shape
- The four hours I spent on that iOS button before this existed