CSS Border Radius Generator
Generate CSS border-radius code visually online free — create rounded corners with live preview, copy CSS code instantly.
Last updated: 10 October 2026
Visually build CSS border-radius — all corners together or each corner independently, in pixels or percentages. A 9999px radius on a 200×40 button produces a perfect pill; 20px 0px 20px 0px creates an alternating leaf shape.
border-radius: 16px 16px 16px 16px;
Worked Examples
Tested shapes
- All corners 9999px on a 200×40 button → full pill shape
- Individual 20px 0px 20px 0px → asymmetric leaf with alternating rounded corners
- 50% on a square element → a perfect circle
Corner syntax
- One value applies to all four corners; four values run top-left, top-right, bottom-right, bottom-left.
- Percentages scale with the element's own dimensions — 50% on a rectangle makes an ellipse.
- border-radius clips the background and border, but child content overflow needs overflow:hidden as well.
About CSS Border Radius Generator
Generate CSS border-radius code visually. Adjust each corner independently (top-left, top-right, bottom-right, bottom-left) or set all corners at once. Switch between pixel and percentage units. Test data: set all corners to 9999px on a 200x40px button element — produced a perfect pill shape with fully rounded ends. Set individual values of 20px 0px 20px 0px — created an asymmetric leaf-shaped element with alternating rounded and square corners.
Limits: Does not generate border-image or mask-based rounded corners; Percentage-based radii may produce unexpected shapes if the element's aspect ratio changes; Very large pixel values (10000px+) are clamped to half the element's size — no visual difference beyond that; Does not preview border-radius on non-rectangular elements like images or complex nested layouts
Who Uses This Tool
- A frontend developer creating a pill-shaped button by setting all corners to 9999px
- A designer generating asymmetric rounded corners for a card component with a decorative accent shape
- A UI engineer setting specific corner radii for a tab bar where only the top corners should be rounded
Key Features
- Individual corner control (TL, TR, BR, BL)
- Live preview on sample element
- Pixel or percentage units
- Copy CSS code
- Reset all corners to zero
- Shorthand property output
How to use CSS Border Radius Generator
- Adjust the border radius slider to set all corners simultaneously.
- Toggle 'Individual Corners' to set each corner separately.
- Switch between px and % units depending on your needs.
- Copy the generated CSS code to your clipboard.
How It Compares
Unlike border-radius.com which generates only the shorthand property and requires manual input, this tool provides visual sliders with real-time preview. It also outputs individual corner values — most generators only produce the shorthand, which doesn't work when corners have different radii.
Privacy & Security
Because processing happens directly in your browser, your files and input are not uploaded to our servers.
Written and checked by Mohammad Sohail
Shape outputs re-checked on 10 October 2026 against the live preview.
About FreeDigitalToolkit →Frequently Asked Questions
How do I make a perfect circle?
Set all corner radii to 50% (or half the element's width/height). For a square element (200x200), 50% radius creates a circle. For a rectangle, you need the radius to be at least half the shorter side.
What does 9999px radius do?
Any radius value larger than half the element's shortest side produces the same result — a fully rounded end. 9999px is a common shortcut for pill shapes that works regardless of element size.
What's the difference between px and % units?
Pixel values are fixed — a 20px radius stays 20px regardless of element size. Percentage values scale with the element — 50% radius on a 200px element is 100px, but on a 100px element it's 50px. Use % for responsive designs.
Can I set only two corners?
Yes. Use the individual corner controls. Set top-left and bottom-right to 20px while leaving top-right and bottom-left at 0px to create a diagonal or leaf-shaped element.
Does border-radius affect the element's content?
By default, content is clipped to the rounded corners. You can override this with 'overflow: visible' or the 'border-radius' shorthand in the box model. The visual clip applies to backgrounds, images, and borders.
Related Tools
Browse all Generator Tools or explore our full collection of 86 free tools.