⬜ CSS Border Radius Generator with Live Preview
By Shihab Mia · Updated 2026-06-27
Drag the sliders to round the corners. The preview and CSS update live.
Rounded corners are one of the quickest ways to make a button, card or image feel finished, and they all come from a single CSS property: border-radius. This generator lets you drag a slider for each corner, switch between pixels, percentages, rem and em, and even split each corner into separate horizontal and vertical radii for true elliptical shapes. Watch the box update live, then copy clean, shorthand border-radius CSS straight into your stylesheet.
What is the CSS Border Radius Generator?
The border-radius property rounds the corners of an element by defining a radius for each of its four corners. With one value you round all four equally, with two values you set one radius for the top-left and bottom-right pair and another for the top-right and bottom-left pair, and with four values you control every corner in the order top-left, top-right, bottom-right, bottom-left (clockwise from the top-left). A three-value form also exists: the first sets top-left, the middle one sets both top-right and bottom-left, and the last sets bottom-right. The shorthand quietly expands to the four longhand properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius, which you can also set individually when you only need to touch one corner.
Each corner can actually take two radii, not one: a horizontal radius and a vertical radius, separated in the shorthand by a slash. Writing something like "50px / 20px" gives an elliptical corner that is wide and shallow rather than a perfect quarter-circle. When you supply a single radius per corner the browser simply treats both radii as equal, producing a circular arc. Percentages are resolved against the box dimensions: the horizontal radius is a percentage of the width and the vertical radius a percentage of the height, which is why 50 percent on a square turns it into a circle and 50 percent on a rectangle gives a pill or ellipse.
Units matter for responsiveness. Pixel radii stay fixed no matter how the element scales, rem and em radii grow with font size, and percentages flex with the box itself. A common pattern for fully rounded pill buttons is a very large pixel value such as 9999px, which the browser clamps down to a half-circle on the short side without you needing to know the exact height. If the radii you request are too large to fit, the browser scales every corner down by the same factor so adjacent corners never overlap, so the rendered shape can look different from the raw numbers you typed.
The radius rounds the border edge, but its influence spreads further. It clips the background paint, and when you add overflow: hidden it also clips child content such as images to the rounded shape. The outline property, however, does not follow the curve in every browser, which is why a focus ring can appear square around a rounded button unless you use box-shadow or outline-offset to soften it. Borders, box-shadows and background gradients all bend to match the radius automatically, so a single property drives a lot of the visual polish in modern interfaces.
Professional teams rarely sprinkle arbitrary radius numbers across a project. Instead they define a small radius scale as design tokens, for example 2px, 4px, 8px, 12px, 16px and a "full" value of 9999px, then map each token to a role: small controls like chips and badges, medium components like inputs and cards, and large surfaces like modals and sheets. Keeping the radius proportional to element size and consistent across the system is what makes an interface feel coherent rather than noisy, and it is the same scale your code, your tokens and this generator should agree on.
Looking ahead, CSS is gaining a companion corner-shape property that lets corners be more than quarter-circles. Combined with border-radius it can produce bevels, scoops, notches and Apple-style squircles, where superellipse math removes the subtle kink you sometimes see where a straight edge meets a circular curve. Support is still rolling out, so border-radius remains the dependable, universally supported way to round corners today, and this tool focuses on producing that battle-tested CSS.
When to use it
- Rounding buttons, cards, inputs and badges to match a design system radius scale.
- Creating perfectly circular avatars or icons with a 50 percent radius on a square element.
- Building pill-shaped tags, search bars and toggle switches with a very large radius value.
- Designing asymmetric, organic blob shapes using independent elliptical corners.
- Crafting speech-bubble and tab shapes where only some corners are rounded.
- Prototyping a corner style visually before committing the exact values to your CSS or tokens.
How to use the CSS Border Radius Generator
- Keep Link all corners on for a uniform radius, or turn it off to round each corner separately.
- Drag the slider(s) until the preview box looks right, or type an exact number.
- Choose a unit (px, percent, rem or em) to match how your layout scales.
- Optionally enable Elliptical corners to set a separate vertical radius after the slash.
- Press Copy to grab the generated border-radius CSS and paste it into your stylesheet.
Formula & method
Worked examples
You want a card with 16px rounding on all four corners.
- Leave Link all corners enabled.
- Set the All corners slider to 16 with the unit on px.
- All four corners share the same radius, so the shorthand collapses to a single value.
- The generator outputs border-radius: 16px;
Result: border-radius: 16px;
You want only the top two corners rounded by 24px for a tab or sheet header.
- Turn off Link all corners to expose per-corner sliders.
- Set Top left = 24 and Top right = 24.
- Set Bottom left = 0 and Bottom right = 0.
- In TL TR BR BL order the values are 24px 24px 0 0, which is unique per pair so it stays as four values.
- The generator outputs border-radius: 24px 24px 0px 0px;
Result: border-radius: 24px 24px 0px 0px;
You want a fully rounded pill button that stays correct at any height.
- Leave Link all corners enabled and set the unit to px.
- Drag the All corners slider to a very large value, around 9999.
- The browser clamps the radius to half the short side, giving semicircular ends.
- The pill stays perfect whether the button is 32px or 48px tall.
Result: border-radius: 9999px;
You want an elliptical corner that is 60px wide but only 30px tall on the top-left.
- Turn off Link all corners and enable Elliptical corners.
- Set the horizontal Top left to 60px and the others to 0.
- Set the vertical Top left to 30px and the others to 0.
- The horizontal radii come first, then a slash, then the vertical radii.
- The generator outputs border-radius: 60px 0px 0px 0px / 30px 0px 0px 0px;
Result: border-radius: 60px 0px 0px 0px / 30px 0px 0px 0px;
How the number of values maps to corners in border-radius shorthand
| Values supplied | Corners affected | Example |
|---|---|---|
| 1 value | All four corners equally | border-radius: 12px |
| 2 values | TL and BR / then TR and BL | border-radius: 12px 4px |
| 3 values | TL / then TR and BL / then BR | border-radius: 12px 4px 8px |
| 4 values | TL, TR, BR, BL clockwise | border-radius: 12px 4px 8px 2px |
Common border-radius recipes
| Effect | CSS |
|---|---|
| Subtle rounding | border-radius: 4px |
| Standard card | border-radius: 12px |
| Pill / fully rounded button | border-radius: 9999px |
| Circle (square element) | border-radius: 50% |
| Rounded top only | border-radius: 16px 16px 0 0 |
| Speech-bubble (one sharp corner) | border-radius: 16px 16px 16px 0 |
| Leaf / petal shape | border-radius: 0 50% 0 50% |
| Elliptical top edge | border-radius: 50% 50% 0 0 / 30px 30px 0 0 |
A typical design-system radius scale and where each step fits
| Token | Value | Use for |
|---|---|---|
| radius-xs | 2px | Checkboxes, tiny badges |
| radius-sm | 4px | Chips, small buttons, tags |
| radius-md | 8px | Inputs, default cards |
| radius-lg | 12px to 16px | Modals, large cards, sheets |
| radius-xl | 20px to 24px | Hero panels, feature blocks |
| radius-full | 9999px | Pills, avatars, circular buttons |
Common mistakes to avoid
- Expecting 50% to make a circle on a rectangle. A 50 percent radius only produces a perfect circle when the element is square. On a rectangle the horizontal radius is 50 percent of the width and the vertical radius 50 percent of the height, so you get an ellipse or a pill, not a circle.
- Forgetting overflow hidden when clipping children. Rounding a container does not automatically clip an image or background placed inside it. You usually need overflow: hidden on the parent so child content follows the rounded shape.
- Mixing up the corner order. The four-value shorthand runs clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. Writing them in the wrong order rounds the wrong corners.
- Using huge percentages and getting odd shapes. Percentages above what the box can fit are scaled down by the browser so adjacent corners do not overlap, which can make the result look different from the raw number you typed.
- Assuming the focus outline follows the curve. In several browsers the outline used for keyboard focus stays rectangular around a rounded element. Use outline-offset, or a box-shadow ring, when you need the focus indicator to match the rounded corners.
- Scattering arbitrary radius values across a project. Using a different unrelated radius on every component makes an interface feel inconsistent. Define a small radius scale as tokens and reuse those steps so related elements share the same rounding.
Glossary
- border-radius
- The CSS property that rounds the corners of an element by setting a radius for each corner.
- Corner radius
- The size of the rounding at a single corner, measured as the radius of the arc that replaces the sharp corner.
- Elliptical corner
- A corner with different horizontal and vertical radii, written with a slash, producing an oval rather than circular curve.
- Shorthand
- A single property that sets several related values at once, here all four corners in one border-radius declaration.
- Longhand
- The individual properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius that the shorthand expands into.
- Pill shape
- A fully rounded shape made by using a radius at least half the element height, common for tag and toggle buttons.
- Radius scale
- A small set of agreed radius values, stored as design tokens, that a project reuses to keep rounding consistent.
- corner-shape
- A newer CSS property that, alongside border-radius, lets corners be beveled, scooped, notched or squircle rather than a plain quarter-circle.
Frequently asked questions
What is the CSS border-radius property?
The border-radius property rounds the corners of an element. You can give one value for all corners, two values for diagonal pairs, three values, or four values for individual control in the order top-left, top-right, bottom-right, bottom-left. This generator builds the value for you and shows a live preview.
How do I make a perfect circle with border-radius?
Use border-radius: 50% on an element whose width and height are equal. The radius is resolved against the box size, so a square becomes a circle. On a non-square element the same 50 percent produces an ellipse or pill instead.
How do I make a pill-shaped button?
Set a very large radius such as border-radius: 9999px on the button. The browser clamps the radius to half the short side, giving semicircular ends. Because it is clamped, the same value works at any button height without you knowing the exact size.
What does the slash in a border-radius value mean?
The slash separates horizontal radii from vertical radii. Values before the slash set the horizontal radius of each corner and values after it set the vertical radius, which lets you create elliptical corners. Enable the elliptical option in this tool to generate that syntax.
Should I use px, percent, rem or em for border radius?
Use pixels for a fixed visual rounding, rem or em when you want the radius to scale with font size, and percentages when it should flex with the element size. The tool lets you switch units and adjusts the preview and CSS accordingly.
How do I round only the top corners of an element?
Turn off Link all corners, set the top-left and top-right sliders to your chosen radius, and leave the bottom corners at zero. The generator outputs a four-value shorthand such as border-radius: 16px 16px 0px 0px.
Why are my rounded corners not clipping the image inside?
border-radius rounds the element box but does not clip overflowing children on its own. Add overflow: hidden to the rounded parent so an image or background inside it is also clipped to the rounded shape.
Why does the focus outline still look square on a rounded button?
In some browsers the outline drawn for keyboard focus does not follow the border-radius curve, so it appears rectangular. To match the rounding, add a little outline-offset, or replace the outline with a box-shadow ring that bends to the radius.
Is border-radius supported in all browsers?
Yes. border-radius is part of CSS3 and has been supported without a prefix in every major browser for many years, so you can use it everywhere without fallbacks. Only newer additions like the corner-shape property still need a progressive-enhancement approach.
How do I set a consistent border radius across a whole project?
Define a small radius scale as variables or design tokens, for example 4px, 8px, 12px, 16px and 9999px, then apply the matching token to each component by role. Reusing the same steps keeps related elements visually consistent instead of using arbitrary one-off values.