CSS border-radius: Shorthand and Shape Reference
The four-value order, the slash syntax for elliptical corners, px vs %, the circle and pill recipes, and why the browser shrinks a radius that is too big.
border-radius takes up to four values and they run clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. Everything else — percentages, the slash, the pill trick — is a variation on that one rule.
/* TL TR BR BL */
border-radius: 8px 24px 40px 4px;How many values to write
The shorthand collapses exactly like margin and padding:
| Values | Example | What each value rounds |
|---|---|---|
| 1 | border-radius: 12px | all four corners |
| 2 | border-radius: 12px 4px | 12px on top-left and bottom-right, 4px on top-right and bottom-left |
| 3 | border-radius: 12px 4px 8px | top-left 12px, top-right and bottom-left 4px, bottom-right 8px |
| 4 | border-radius: 12px 4px 8px 2px | top-left, top-right, bottom-right, bottom-left |
The two-value form is the one that trips people up, because it pairs diagonal corners rather than top and bottom the way margin pairs sides. If you want different rounding on the top edge than the bottom edge, you need all four values (or two longhands).
If you just want the code, the CSS Border Radius Generator gives you a slider per corner and writes the shortest valid declaration for you. The rest of this page is what those values actually mean.
The longhand properties
The shorthand expands to four physical longhands, which are what you reach for when only one corner changes:
| Longhand | Corner |
|---|---|
border-top-left-radius | top-left |
border-top-right-radius | top-right |
border-bottom-right-radius | bottom-right |
border-bottom-left-radius | bottom-left |
/* Round only the top edge — a card header, a tab, a modal top */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
/* Or, as shorthand */
border-radius: 12px 12px 0 0;There is also a logical set that follows the writing direction instead of the screen: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius. On a left-to-right page border-start-start-radius is the top-left corner; in an RTL layout it flips to the top-right automatically. All three engines have shipped these since 2021, so they are safe if you build bidirectional interfaces.
The slash: two radii per corner
Every corner is really a quarter of an ellipse, with a horizontal radius and a vertical one. The single-value forms just set both to the same number. The slash sets them separately — values before the slash are horizontal, values after are vertical:
border-radius: 50% / 20%;That reads as: every corner curves 50% of the element’s width horizontally and 20% of its height vertically. The full form takes up to four values on each side of the slash, which is the eight-number soup you see in “fancy” or “organic blob” generators:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;The formal grammar is <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?, and the two sides expand independently — so border-radius: 10px 5% / 20px 25px 30px 35px gives the top-left corner a 10px horizontal and 20px vertical radius, the top-right 5% and 25px, and so on.
Each longhand accepts the same pair without a slash: border-top-left-radius: 40px 20px is one wide, shallow corner.
px and % are different tools
A pixel radius is absolute. 16px looks identical on a small button and a full-width hero card, which is usually what a design system wants.
A percentage radius scales with the element, and it is resolved per axis: the horizontal radius against the border box’s width, the vertical against its height. On a 300×100 card, border-radius: 50% gives every corner a 150px horizontal curve and a 50px vertical one. That is an ellipse quarter, not a circle quarter — which is why 50% on a wide button produces a lens or an oval instead of the pill you expected.
| Element | border-radius: 50% produces |
|---|---|
| 100 × 100 square | a perfect circle |
| 300 × 100 card | an ellipse (150px × 50px corners) |
| 40 × 40 avatar | a perfect circle |
| 200 × 40 button | a lens, not a pill |
Percentages have exactly one common job: a square element you want perfectly round. Avatars, dots, badges. 50% and you are done — and on a square, 50% and 100% render identically, because the browser caps each radius at half the side.
Shape recipes
| Shape | CSS |
|---|---|
| Circle (square element) | border-radius: 50% |
| Pill / fully rounded button | border-radius: 9999px |
| Rounded card | border-radius: 12px |
| Top corners only | border-radius: 12px 12px 0 0 |
| Left side only | border-radius: 12px 0 0 12px |
| Chat bubble (one square corner) | border-radius: 16px 16px 16px 4px |
| Leaf | border-radius: 0 32px 0 32px |
| Egg | border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% |
| Organic blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% |
| Squircle-ish (superellipse fake) | border-radius: 30% on a square |
The pill trick, and why it works
For a pill-shaped button you do not need to measure anything:
border-radius: 9999px;This works because of the overlap rule in the CSS Backgrounds and Borders spec: when the radii of two adjacent corners together exceed the side between them, the browser scales all the radii down by the same factor until they fit. A 9999px radius on a 40px-tall button gets reduced to 20px per corner — exactly half the height, exactly a pill, at any height, with no media queries. Tailwind v3 spelled this rounded-full: 9999px; v4 uses calc(infinity * 1px), which is the same idea taken to its logical end.
The same rule explains the other classic surprise. Set 100px radii on a 120px-tall box and the two corners on each vertical side would need 200px of edge that only has 120px, so everything shrinks to 60px. Your radius is not broken; it is being clamped. The scaling factor is the smallest side length ÷ (sum of the two radii on that side) across all four sides — and because the same factor applies to every corner, an asymmetric shape keeps its proportions as it shrinks.
Common radius values in design systems
Useful when you are trying to match an existing look rather than invent one:
| Scale step | Tailwind v4 | Bootstrap 5 | Material Design 3 |
|---|---|---|---|
| None | rounded-none — 0 | rounded-0 — 0 | 0 |
| Extra small | rounded-xs — 2px | — | 4px |
| Small | rounded-sm — 4px | rounded-1 — 4px | 8px |
| Default / medium | rounded-md — 6px | rounded — 6px | 12px |
| Large | rounded-lg — 8px | rounded-3 — 8px | 16px |
| Extra large | rounded-xl — 12px | rounded-4 — 16px | 28px |
| 2XL | rounded-2xl — 16px | rounded-5 — 32px | — |
| 3XL | rounded-3xl — 24px | — | — |
| Full | calc(infinity * 1px) | rounded-pill — 50rem | full |
If you are converting a designer’s pixel handoff into the rem values a scale like this expects, the PX to REM Converter does the arithmetic at whatever root font size you set.
Concentric corners: the inner radius formula
When you nest one rounded box inside another — a card inside a container, an image inside a padded frame — giving both the same radius looks wrong. The inner curve appears too tight against the outer one. The fix is one subtraction:
inner radius = outer radius − gapwhere the gap is the padding (or the border width) between the two edges. A card with border-radius: 16px and padding: 8px wants border-radius: 8px on the thing inside it. In CSS you can even write it directly:
.card {
--radius: 16px;
--pad: 8px;
border-radius: var(--radius);
padding: var(--pad);
}
.card > img {
border-radius: calc(var(--radius) - var(--pad));
}If the subtraction goes negative, use 0 — a square inner corner reads better than a mismatched curve.
Rounded corners do not clip their children
The background and the border curve, but an <img> inside the card will happily poke its square corners past the curve. Add overflow: hidden to the rounded element and the children get clipped to the same shape. overflow: clip does the same with no scroll container side effects.
The one exception worth knowing: on some Safari versions a child that creates its own compositing layer (a transform, an animation) can still escape the clip. If a rounded image flashes square corners during a hover transition, that is what you are seeing; giving the child its own matching border-radius fixes it.
What else follows the curve
box-shadowtraces the rounded shape automatically, inset or outset. No extra work.outlinefollows the radius in every current browser, but only since Chrome 94 (late 2021). If your focus rings on rounded buttons look like squares, an old browser is the reason.- Background images are clipped to the curve by default (
background-clip: border-box). <table>ignoresborder-radiuson cells unless the table is set toborder-collapse: separate.- Negative values are invalid and the whole declaration is dropped, so a stray
-4pxsilently gives you square corners.
Frequently asked questions
What is border-radius in CSS?
It is the property that rounds an element’s corners, curving the border, the background and any background image along a quarter-ellipse. It takes a length (12px, 1rem) or a percentage, one to four values, optionally with a second set after a slash.
What order do the four values go in?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. border-radius: 8px 24px 8px 24px rounds the top-left and bottom-right by 8px and the other two by 24px.
How do I make a circle with border-radius?
Give the element equal width and height, then border-radius: 50%. On a non-square element 50% produces an ellipse, not a circle — the percentage is resolved separately against the width and the height.
What is the difference between 50% and 100%?
On a square, nothing visible: both are clamped to half the side, and both render a circle. On a non-square element 100% is simply a more extreme ellipse than 50%. Prefer 50% — it says what you mean.
Why does my radius look smaller than the value I set? Because two adjacent radii asked for more space than the side between them has, so the browser scaled every radius down proportionally until they fit. This is defined behaviour, not a bug.
What does border-radius: 9999px do?
It asks for a radius far larger than the element, so the clamping rule reduces it to exactly half the shorter side — a pill on a wide button, a circle on a square one, at any size. 50rem and calc(infinity * 1px) are used for the same effect.
How do I round only the top corners?
border-radius: 12px 12px 0 0, or the two longhands border-top-left-radius and border-top-right-radius. Same pattern with the values shifted for any other edge.
Can border-radius be a percentage on only one axis?
Yes — mix units freely, including across the slash: border-radius: 20px / 50% gives a fixed 20px horizontal curve and a vertical one that scales with the element’s height.
Does border-radius affect the element’s size or layout? No. The box keeps exactly the same width, height and position; only the painted corners change. It does affect hit testing in modern browsers, so a clicked pixel outside the curve no longer counts as a click on the element.
Shape the corners visually in the CSS Border Radius Generator — link the four corners for a symmetric radius or unlink them for a leaf or a blob, switch between px and %, and copy the shortest valid shorthand. Everything runs in your browser. Nearby: the CSS Box Shadow Generator, the CSS Gradient Generator and the Color Contrast Checker.