Border Radius Generator
Design custom border-radius values with a visual editor. Adjust each corner independently (top-left, top-right, bottom-right, bottom-left) or link them for uniform rounding. Use pixels or percentages. Preview the shape in real time on a customizable box. Advanced mode lets you set horizontal and vertical radii separately for elliptical corners. Copy the CSS border-radius shorthand instantly.
Border Radius
Preview
CSS Output
.rounded-box {
border-radius: 16px;
}How to Use
- 1
Adjust Corners
Use sliders or number inputs for each corner. Link them for uniform rounding.
- 2
Choose Unit
Toggle between pixels (px) and percentage (%) for the radius values.
- 3
Copy CSS
Copy the border-radius shorthand CSS property.
Examples by Niche
border-radius: 9999px — fully rounded pill shape for buttons and tags
border-radius: 12px — uniform rounded corners for modern cards
border-radius: 16px 16px 16px 0 — rounded with sharp bottom-left
Frequently Asked Questions
Can I set different values for each corner?
Yes, unlink the corners to set each one independently. You can also toggle advanced mode to set horizontal and vertical radii separately for elliptical shapes.
What units are supported?
You can use pixels (px) or percentages (%). Use 50% for a perfect circle on a square element, or experiment with mixed values for organic shapes.
What is the CSS shorthand output?
The tool generates the shorthand border-radius property. For uniform corners, a single value. For different corners: top-left top-right bottom-right bottom-left. For elliptical: horizontal / vertical radii.
Can I create asymmetric or organic shapes with border-radius?
Yes, CSS border-radius supports the slash syntax (e.g., border-radius: 50% 30% 70% 40% / 60% 40% 50% 70%) where values before the slash control horizontal radii and values after control vertical radii. This creates organic, blob-like shapes commonly used in modern UI design for decorative backgrounds and avatar masks.
Related Tools
CSS Flexbox Generator
Build Flexbox layouts visually with direction, alignment, and gap controls plus CSS export.
CSS Grid Generator
Design CSS Grid layouts visually with rows, columns, and gap controls plus CSS export.
CSS Box Shadow Generator
Design CSS box shadows visually with blur, spread, color controls and layered shadows.
Related Articles
12 Free CSS Generators Every Web Designer Should Bookmark in 2026: Build Layouts, Shadows, Gradients, and More Without Writing Code
Discover 12 free, browser-based CSS generators and design tools for web designers in 2026 — gradients, shadows, grids, flexbox, patterns, and layout utilities that replace paid design software.
Free CSS Layout Generators for Modern Web Design: Flexbox, Grid, Box Shadow, Border Radius, and Pattern Tools Compared
Compare the best free online CSS generators for Flexbox, Grid, box shadows, border radius, and background patterns. No signup needed — build production-ready CSS in seconds.