Border Radius Generator
Set each corner radius with sliders — including fancy blob shapes — and copy the CSS.
border-radius: 24px 24px 24px 24px;
Frequently Asked Questions
What is the eight-value border-radius syntax?
Writing border-radius with a slash, like 30% 70% 70% 30% / 30% 30% 70% 70%, sets horizontal and vertical radii separately, which creates organic blob shapes.
What is the difference between px and %?
Pixels are fixed sizes, while percentages are relative to the element’s width (horizontal) and height (vertical). Percentage radii scale with the element.
Why does my corner look elliptical?
When horizontal and vertical radii differ, the corner is an ellipse segment rather than a circle arc — that is exactly what fancy mode controls.
How do I round only one corner?
Use the individual corner sliders in simple mode and leave the others at 0. The shorthand output orders corners top-left, top-right, bottom-right, bottom-left.
Related Tools
Box Shadow Generator
Tweak shadow offset, blur, spread, colour and opacity with a live preview box.
CSS Gradient Generator
Build linear or radial gradients with colour stops and copy the CSS instantly.
Color Palette Generator
Pick a base colour and get harmonies, tints, shades and a full tonal scale.
CSS Minifier
Minify CSS code to reduce file size and improve page load speed.