The CSS border-radius property rounds the corners of an element's border box. At its simplest it's one value — border-radius: 8px — but the full syntax supports eight independent corner values that let you create ellipses, pills, squircles, leaves, and any asymmetric shape you can imagine.
This guide covers every variant of the syntax, the most useful recipes ready to copy, and common pitfalls to avoid.
The basic syntax
border-radius: 12px;
This applies the same radius to all four corners. The larger the value, the more rounded the corner.
border-radius: 0; /* sharp square corners */
border-radius: 4px; /* very slightly rounded */
border-radius: 12px; /* visibly rounded — common for cards */
border-radius: 24px; /* strongly rounded */
border-radius: 9999px; /* pill / fully rounded ends */
border-radius: 50%; /* circle (on equal-width/height elements) */
The shorthand — four corners
Like margin and padding, border-radius accepts up to four values in clockhand order starting from the top-left:
border-radius: top-left top-right bottom-right bottom-left;
Examples:
/* All equal */
border-radius: 12px;
/* Top corners round, bottom corners square */
border-radius: 12px 12px 0 0;
/* Only top-left and bottom-right round */
border-radius: 12px 0;
/* Different radius on every corner */
border-radius: 4px 16px 24px 8px;
The two-value shorthand (12px 0) sets top-left & bottom-right to the first value, top-right & bottom-left to the second — just like the diagonal pairs in margin.
Elliptical corners — the slash syntax
Each corner can have a different horizontal and vertical radius, making an elliptical arc instead of a circular one:
border-radius: horizontal-radius / vertical-radius;
/* Horizontal radius 40px, vertical radius 20px on all corners */
border-radius: 40px / 20px;
/* Squircle-style: wide horizontal, tighter vertical */
border-radius: 60% 40% 40% 60% / 60% 60% 40% 40%;
The slash syntax unlocks organic, blob-like shapes popular in modern illustration-heavy design.
Longhand properties
Each corner also has its own property:
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
Longhand properties are useful in component overrides where you want to change one corner without repeating all four values.
Common recipes
Card
border-radius: 12px;
The default choice for cards, modals, and panels. Works well at any size.
Button — standard
border-radius: 6px;
Slightly rounded. Feels clickable without being a pill.
Button — pill
border-radius: 9999px;
A large number ensures fully rounded ends regardless of button height. More maintainable than 50% which creates an oval on wide buttons.
Circle avatar
width: 48px;
height: 48px;
border-radius: 50%;
50% on an element with equal width and height produces a perfect circle.
Squircle (iOS-style icon)
border-radius: 22.5%;
Apple uses approximately 22.5% of the side length for app icons. This ratio creates the "superellipse" look — softer than a standard circle, sharper than an oval.
Top-only rounded (sheet / bottom sheet)
border-radius: 16px 16px 0 0;
Used for bottom sheets, toasts anchored to the bottom, and sticky footers that sit inside a rounded card.
Bottom-only rounded
border-radius: 0 0 16px 16px;
Useful for headers that connect flush to the page top but round at the bottom.
Asymmetric accent shape
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
A common "blob" pattern in landing page hero sections. Gives an organic, hand-drawn feel without using an SVG.
Speech bubble pointer corner
border-radius: 16px 16px 0 16px;
One sharp corner in a rounded element creates a simple speech bubble effect without needing extra pseudo-elements.
Leaf shape
border-radius: 0 50% 0 50%;
Two opposite corners sharp, two rounded — creates a leaf or diamond-card shape.
Percentage values
Percentages are relative to the element's width (horizontal radius) and height (vertical radius):
border-radius: 50%; /* circle on square, ellipse on rectangle */
border-radius: 25%; /* moderate rounding relative to size */
Be careful: a percentage radius changes as the element resizes. This is intentional for circles and ellipses, but can be unexpected for fixed-design UI components. Use px or rem when you want a stable corner size regardless of element dimensions.
Performance notes
border-radius is cheap. It's computed during paint and doesn't trigger layout. You can animate it freely:
.card {
border-radius: 12px;
transition: border-radius 0.3s ease;
}
.card:hover {
border-radius: 24px;
}
Animating border-radius causes a repaint but no reflow — acceptable for hover effects and state transitions.
The only case to be careful: very complex border-radius values on large elements with overflow: hidden and inner content can hurt composite performance on older GPUs. In those cases, profile before optimising.
Common mistakes
Using 50% on non-square elements
border-radius: 50% on a 100px × 40px button gives an oval, not a circle. For pill-shaped buttons use 9999px. For circles make width and height equal.
Shadow clipping
If your element has overflow: hidden alongside border-radius, the box-shadow is clipped. Apply the shadow to a wrapper element without overflow: hidden, or use filter: drop-shadow() instead.
Forgetting the slash for elliptical corners
border-radius: 40px 20px means top-left 40px, top-right 20px (shorthand). For an elliptical corner (40px horizontal, 20px vertical), you need border-radius: 40px / 20px.
border-radius vs border-*-radius
Setting any longhand property (border-top-left-radius) after the shorthand (border-radius) overrides only that corner — useful for targeted overrides. If you set the shorthand after the longhand, the shorthand wins for all four corners.
Build shapes visually
Tweaking eight values plus the slash syntax by hand is tedious. Use Toolmingo's Border Radius Generator to drag sliders and see the shape live, then copy the CSS. You can also preview the radius against different background colours and alongside a box shadow.
FAQ
Q: What's the maximum useful value for border-radius?
Anything above half the element's smaller dimension has no additional effect for circular arcs. 9999px is a safe "maximum" for pills since it always exceeds half the height. Beyond that, values clip to the maximum.
Q: Can I use border-radius on images?
Yes. border-radius clips the painted content including images. Set overflow: hidden on an img wrapper or apply border-radius directly to the <img> tag — both work.
Q: Does border-radius affect the clickable area?
No. The clickable area (hit-test) still follows the rectangular box model even if the corners are visually clipped. If you need a circular click area on a non-square element, use clip-path or an SVG.
Q: Can I animate border-radius from sharp to round?
Yes, it's a smooth interpolatable property. transition: border-radius 0.2s ease works as expected. For more complex shape morphing, clip-path is more powerful but less readable.
Q: Why does my border-radius look different on mobile?
Percentage-based radii adapt to the element's current size. If the element is a different size on mobile, the rendered radius changes. Switch to px or rem for consistent corner sizes across screen sizes.