How to make rounded corners with a free CSS border radius generator
A CSS border radius generator turns slider positions into a border-radius rule you can paste into a stylesheet. To round a box here, pick a shape under Preset Shapes or drag the slider under All Corners, watch the Live Preview change, then click Copy under CSS Code. The default output is a single line such as border-radius: 8px;.
The tool works in pixels (0 to 9,999) or percent (0 to 100). Switch off Symmetrical to set Top Left, Top Right, Bottom Right and Bottom Left separately. It writes the shortest shorthand that means the same thing, from one value to four, or one border-*-radius line per corner if you choose Per corner. It does not write the elliptical slash syntax such as 50px / 30px.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). Once the corners look right, add depth with the box shadow generator, fill the shape with the gradient generator, and choose its colours with the color picker.
Table of Use: what to click and the CSS you get
| Job | Click | CSS written (Shorthand) |
|---|---|---|
| Soft corners on inputs and tags | Slight | border-radius: 4px; |
| Cards and buttons | Rounded (8px) or Large (16px) | border-radius: 8px; |
| Round avatar on a square box | Circle | border-radius: 50%; |
| Capsule button or tag | Pill, with the Wide preview | border-radius: 999px; |
| Card header, or a sheet that slides up | Top Rounded | border-radius: 16px 16px 0 0; |
| Card footer | Bottom Rounded | border-radius: 0 0 16px 16px; |
| Speech-bubble or leaf corner | Leaf Top-Left | border-radius: 50% 0 0; |
| Two opposite corners rounded | Diagonal | border-radius: 50% 0; |
| Pin or teardrop shape | Teardrop | border-radius: 50% 50% 0; |
| Loose, blob-like shape | Organic | border-radius: 60% 40%; |
| One property per corner, for overrides | Per corner | Four lines, from border-top-left-radius to border-bottom-left-radius |
Shorthand values follow the CSS order top-left, top-right, bottom-right, bottom-left, and the tool drops repeats: when top-right equals bottom-left it writes three values, when both pairs match it writes two, and when all four match it writes one. A zero is written as a bare 0 with no unit. To tidy or shrink the stylesheet afterwards, run it through the CSS beautifier or the CSS minifier.
Features
- All corners or each corner. Symmetrical is on at the start, with 8px on every corner. Turn it off to get four sliders, one per corner. Turning it back on copies the Top Left value to all four.
- Pixels or percent. Sliders run 0 to 200px or 0 to 100%. The number box accepts up to 9,999px, which is how you reach 999px for a pill, and values are rounded to two decimals. Changing Unit keeps your numbers but caps them at 100%. One unit applies to all four corners.
- 16 presets. None, Slight, Rounded, Large, Extra Large, Circle, Pill, four Leaf shapes, Top Rounded, Bottom Rounded, Diagonal, Teardrop and Organic. A preset sets the values, the unit and, for Circle and Pill, the preview box.
- Live Preview. The shape updates as you drag. Square and Wide buttons change the preview box, and a Corner Values diagram shows what each corner is set to.
- Two output styles. Shorthand writes the shortest valid rule; Per corner writes four separate properties. Copy puts the text on your clipboard and tells you if the browser blocked it.
- Private and free. No account, nothing to install, and nothing is uploaded.
The generator covers the corner shape only. For layout, build the container with the flexbox generator or the CSS grid generator.
How to use the border radius generator
- Under Unit, choose Pixels (px) for a fixed curve or Percent (%) for a curve that scales with the element.
- Pick a shape under Preset Shapes, or drag the slider under All Corners. Type a number in the box for exact or larger values.
- To round corners differently, switch off Symmetrical (same radius on all corners). The panel changes to Individual Corners with four sliders.
- Under Live Preview, press Square or Wide to see the shape on the box that matches your element.
- Under CSS Code, choose Shorthand or Per corner, then click Copy and paste the rule into your stylesheet.
Who can use it
- Front-end developers who want a quick shorthand for a card, button or modal without remembering the four-value order.
- Designers turning a rounded rectangle from a mock-up into CSS, then adding a soft shadow.
- Students learning CSS, who can watch how px, %, and the shorthand order change the shape.
- Site owners with a custom CSS box in a CMS or page builder who need a rule they can paste. Preview the result in the HTML previewer.
- Image makers who need round corners baked into the file rather than the stylesheet, which is a job for the image round corner generator.
FAQs
What border radius makes a perfect circle in CSS?
Use border-radius: 50% on an element whose width and height are equal. Each corner then curves halfway along both sides, and the four curves meet to form a circle. On a rectangle, 50% draws an ellipse instead. In this tool the Circle preset writes 50% and switches the preview to a square box, so you see the circle straight away.
Should I use px or % for border radius?
Use px when every element should get the same curve, as with buttons, cards and inputs. Use % when the curve should scale with the element, mostly 50% for circles. A percentage is measured against the width for the horizontal curve and against the height for the vertical one, so on a rectangle it draws an elliptical corner. Switch Unit in the tool to compare.
How do I round only the top two corners in CSS?
Turn off Symmetrical, set Top Left and Top Right to the radius you want and leave the bottom two at 0. The tool writes the values in CSS order (top-left, top-right, bottom-right, bottom-left), so the result is border-radius: 16px 16px 0 0;. The Top Rounded preset does exactly this, and Per corner output gives one property for each corner instead.
How do I make a pill-shaped button with CSS?
Give the button a radius larger than half its height, for example border-radius: 999px. The browser caps the curve, so the short ends become semicircles at any button width. Pick the Pill preset in the tool: it switches the preview to the Wide box, because the same 999px value on a square box simply draws a circle.
What happens when the border radius is bigger than the element?
CSS never lets corner curves overlap. If the radii along one side add up to more than that side is long, the browser scales every radius down by the same factor until they fit. That is why 999px produces a pill, and why a uniform percentage above 50% looks the same as 50%. The tool accepts up to 9,999px or 100%.
Why is my image not rounded when I set border-radius on its container?
A container’s border radius rounds its own background and border, but it does not clip a child that overflows the curve. Add overflow: hidden to the container so the image is cut to the rounded shape, or put border-radius on the img element itself. Add object-fit: cover so the picture fills a circular or rounded box without being stretched.
Can I animate border-radius with CSS?
Yes. Add transition: border-radius 0.3s ease for a hover effect, or animate it in @keyframes for a morphing blob. Changing it does not trigger layout, but the element is repainted on every frame, so keep continuous morphing to a few elements. Copy the values from this tool into the start and end keyframes.
Does this border radius generator upload or save my values?
No. The preview and the CSS are produced by JavaScript in your browser, so nothing you set is uploaded (you can check the Network tab in DevTools). The tool does not store settings either: reload the page and it returns to 8px on all four corners.
Related CSS tools: animate the result with the CSS animation generator, or convert plain CSS to nested SCSS with the CSS to SCSS converter.