CSS Border Radius Generator — Copy-Paste Rounded Corners
Top left 24px
Top right 24px
Bottom left 24px
Bottom right 24px
border-radius: 24px; A visual builder for the CSS border-radius property. Drag one slider per corner — or link all four and shape them together — switch between px and % units, and copy the ready-to-paste declaration. The preview updates live, and the output always uses the shortest valid shorthand, so equal corners collapse to a single value instead of four.
How it works
- 1 Shape the corners Drag the sliders to round each corner. Leave 'Link corners' checked to move all four together, or uncheck it to give every corner its own radius — that's how you get leaf and blob shapes.
- 2 Pick a unit Use px for fixed rounding that looks the same at any element size, or % to make the radius scale with the element — 50% on all corners turns a square into a circle.
- 3 Copy the CSS The border-radius declaration under the preview updates as you drag and always collapses to the shortest shorthand. Hit Copy and paste it into your stylesheet.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- What order do the four border-radius values go in?
- Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. So border-radius: 8px 24px 8px 24px rounds the top-left and bottom-right corners by 8px and the other two by 24px. The generator writes the values in this order for you.
- Why does the output sometimes show fewer than four values?
- border-radius follows the same shorthand rules as margin and padding: if the bottom-left equals the top-right it can be dropped, then bottom-right against top-left, then top-right against top-left. Four equal corners collapse to a single value like border-radius: 24px. The generator always emits the shortest form.
- How do I make a perfect circle or a pill shape?
- For a circle, set the element's width and height equal and use 50% on all corners. For a pill (a fully rounded rectangle), use a fixed radius larger than half the element's height — 9999px is the common trick, since browsers cap each radius at what fits.
- What is the difference between px and % radii?
- A px radius is absolute — 16px looks identical on a button and on a full-width card. A % radius is relative to the element's own size, and it's computed separately per axis: the horizontal radius from the width, the vertical from the height. That's why 50% on a non-square element gives an ellipse-shaped corner, not a circular one.
- Why does my radius look smaller than the value I set?
- When the radii of two adjacent corners add up to more than the side between them, the browser scales all radii down proportionally so they never overlap. A 100px radius on a 120px-tall box therefore renders smaller than 100px. This is defined in the CSS spec, not a bug.
- Does border-radius clip the element's content?
- Not by itself — backgrounds and borders are rounded, but child elements like images can still poke out past the curve. Add overflow: hidden to the rounded element to clip its children to the same rounded shape.
From the blog
CSS Border Radius: Shorthand, Percentages, and Round Corners How border-radius really works — the four-value shorthand, px vs %, the circle and pill recipes, and why big radii get scaled down. Read the post →Related tools
CSS Box Shadow Generator Build layered box-shadow code visually and copy the CSS. CSS Gradient Generator Build linear and radial gradients visually and copy the CSS. CSS Minifier Minify and compress CSS code to reduce file size. Color Contrast Checker Check color contrast ratios against WCAG AA and AAA standards.