⬜ CSS Border Radius Generator
By ToolNimba Front-End Team · Updated 2026-06-19
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). 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.
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 a 50px slash 20px value 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% on a square turns it into a circle and 50% 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 or 9999px, which clamps to a half-circle on the short side without you needing to know the exact height. Border-radius also clips background colors and, when combined with overflow hidden, clips child content such as images to the rounded shape.
When to use it
- Rounding buttons, cards, inputs and badges to match a design system.
- Creating perfectly circular avatars or icons with a 50% radius on a square element.
- Building pill-shaped tags and toggle switches with a very large radius value.
- Designing asymmetric, organic blob shapes using independent elliptical corners.
- Prototyping a corner style visually before committing the exact values to your CSS.
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.
- Choose a unit (px, %, 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 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 |
Common mistakes to avoid
- Expecting 50% to make a circle on a rectangle. A 50% radius only produces a perfect circle when the element is square. On a rectangle the horizontal radius is 50% of the width and the vertical radius 50% 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.
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.
- Pill shape
- A fully rounded shape made by using a radius at least half the element height, common for tag and toggle buttons.
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, 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% produces an ellipse or pill instead.
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.