Build beyond rounded rectangles.
Mix soft, sharp, and concave corners, then copy the exact CSS below.
CSS design
CSS Corner Shape Generator
Design corners beyond a standard border radius. Click a round, squircle, bevel, notch, or scoop demo, adjust all corners together or tune each corner independently, and copy the generated CSS.
Five clickable demosFour-corner controlCopy-ready CSS
Interactive CSS generator
Shape every corner
Quick startClick a shape to apply it to all corners
Adjust any corner belowLive demo
Checking supportPreview result
420 × 260px demoLinked corners
1
Demo areaResize the example
2
Corner controlsLink them or adjust all four areas
A radius above 0 is required for the corner shape to be visible.
3
AppearanceFinish the demo style
Generated resultCopy-ready CSS
.corner-shape-demo {
width: min(100%, 420px);
min-height: 260px;
border: 3px solid #176f50;
border-radius: 64px;
corner-shape: squircle;
overflow: hidden;
color: #10221d;
background: #c9f2df;
}Core formulacorner-shape: top-left top-right bottom-right bottom-left
A visible corner shape also needs a border-radius greater than zero; one to four values follow the same corner order as border-radius.
Method
How the css corner shape generator works
The generator maps each physical corner to a corner-shape value and a border radius. One value applies everywhere, two values pair opposite corners, three values share the second value across top-right and bottom-left, and four values control every corner clockwise from top-left. Custom curves use superellipse(K), where larger positive values become more square and negative values become concave.
Formula
corner-shape: top-left top-right bottom-right bottom-leftA visible corner shape also needs a border-radius greater than zero; one to four values follow the same corner order as border-radius.
Worked example
Mix a squircle, bevel, notch, and scoop on one card
Switch to Each corner, select squircle for top-left, bevel for top-right, notch for bottom-right, and scoop for bottom-left, then give each corner a visible radius. The result uses a four-value corner-shape declaration in the same order as border-radius.
Implementation
Copyable code examples
Use these examples as a starting point, then match the values and assumptions to the rendered project.
Squircle card
.card {
border-radius: 48px;
corner-shape: squircle;
overflow: hidden;
}Mixed corners
.card {
border-radius: 56px 32px 72px 24px;
corner-shape: squircle bevel notch scoop;
}Feature query
@supports (corner-shape: squircle) {
.card { corner-shape: squircle; }
}Practical guidance
Using the result accurately
Start with a preset, increase the radius until the shape is easy to inspect, and then edit individual corners only where the design needs emphasis. Check content clipping, borders, shadows, focus indicators, and responsive widths in a browser that supports corner-shape before shipping it.
Important limitation
The corner-shape property is newer than border-radius and may not render in every browser. Unsupported browsers ignore it and keep the border-radius fallback, so test support for the browsers required by the project.
References: CSS Borders and Box Decorations Module Level 4: corner shaping.
Common questions
CSS Corner Shape Generator FAQ
Answers about the method, assumptions, and practical use.
Why does corner-shape appear to do nothing?
The element needs a non-zero border-radius, and the browser must support corner-shape. Increase the radius and check the support badge in the live demo.
Can every corner use a different shape?
Yes. Choose Each corner to set an independent shape and radius for top-left, top-right, bottom-right, and bottom-left.
What does superellipse(K) control?
K controls the curve continuously. Positive values move from round toward square, zero produces a bevel, and negative values create increasingly concave corners.
What happens in an unsupported browser?
The browser ignores corner-shape but retains border-radius, giving the element a rounded fallback instead of the selected custom corner shape.