16
Horizontal radii
16
16
16
16
Vertical radii
16
16
16
16
With different horizontal and vertical radii, each corner becomes an ellipse. Percentages give the organic shapes.
CSS
Shape corners with border-radius, from a plain rounded card to the elliptical blobs you get by putting different values on each side of the slash. Pick a mode, drag the sliders and copy the rule.
With different horizontal and vertical radii, each corner becomes an ellipse. Percentages give the organic shapes.
border-radius: 16px rounds every corner.
Four values go clockwise from the top left.
Use the slash for organic shapes. In
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%
the values before the slash are horizontal radii and the values
after it are vertical radii, so each corner becomes part of an
ellipse instead of a quarter circle. The Elliptical (blob) mode
writes this form.
A fixed corner regardless of the element's size. Use pixels on cards, buttons and inputs, so a wide card and a narrow one look related.
Relative to the element's own width and height, so it scales. 50% gives a circle on a square and an ellipse on a rectangle. Blob mode switches to percent for this reason.
A large pixel value such as 9999px clamps to a half-circle at each end, giving a pill that stays correct at any height.
Set the inner radius to the outer radius minus the padding, or the curves look uneven where they meet. For example, a 12px inner radius inside 4px of padding needs an outer radius of 16px.
Corners do not clip by default.
A child image with square corners pokes out past the
rounded parent. Add overflow: hidden to the
parent. However, that also clips any child shadow or
content that you meant to extend past the edge.
iOS corners are not circular. Apple uses a continuous curve, often called a squircle, that blends into the straight edge gradually. border-radius always draws circular or elliptical arcs, so it looks slightly sharper next to a native control even when your value is right.
border-radius: 12px; /* all four */
border-radius: 12px 4px; /* TL+BR, then TR+BL */
border-radius: 12px 4px 8px 0; /* clockwise from top left */
border-radius: 50%; /* circle on a square */
border-radius: 9999px; /* pill, clamps at half height */
/* Horizontal radii / vertical radii */
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
/* Nesting: inner radius = outer radius - padding, or the
curves do not stay concentric and it looks subtly wrong */
.outer { border-radius: 16px; padding: 4px; }
.inner { border-radius: 12px; }/* A child with square corners pokes out past a rounded parent */
.card {
border-radius: 12px;
overflow: hidden; /* now the image is clipped too */
}
/* But overflow: hidden also clips any shadow meant to escape,
and creates a new scroll container. If you only need to clip
an image, round the image instead: */
.card img { border-radius: 12px 12px 0 0; }/* CSS has no continuous corner curve, so iOS controls will always
look slightly softer than a plain border-radius. The nearest
approximation is a clip-path, at the cost of clipping shadows: */
.squircle {
aspect-ratio: 1;
clip-path: path("M 0 50 C 0 10 10 0 50 0 S 100 10 100 50 100 90 50 100 0 90 0 50");
}
/* corner-shape: squircle is specified but not yet shipped anywhere,
so for now this is a workaround rather than a solution. */When two radii on the same edge add up to more than that edge's length, the browser scales every radius down proportionally instead of overlapping them. This is why very large percentage values still produce a sensible shape, and why 9999px works as a pill.
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
It separates horizontal radii from vertical radii. border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% gives every corner an elliptical curve instead of a circular one, which is how the organic blob shapes are made.
Use pixels on cards and buttons, where you want the same corner at every size. Use percentages when the corner should scale with the element: 50% gives a circle on a square and an ellipse on a rectangle.
Set border-radius: 50% on a square element. On a rectangle the same value gives an ellipse. For a pill, use a large pixel value such as 9999px, which the browser clamps to a half-circle at each end.
Apple uses a continuous corner curve, sometimes called a squircle, which blends into the straight edge more gradually than a circular arc. border-radius only draws circular or elliptical arcs, so it looks a little sharper than a native iOS control even with the right value.
Only if you add overflow: hidden to the rounded element. Without it, a child image with square corners pokes out past the rounded parent.
Depth comes from the box shadow generator, and backgrounds from the gradient generator. For laying the cards out, see CSS grid and flexbox.