CSS Border Radius Generator
Fast, accurate and free online css border radius generator tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Rate this tool:
Related tools
Other tools you may find usefulCSS border-radius generator
The interactive CSS border-radius generator allows you to set the roundness of each of the four corners of an HTML element independently or together (linked mode). The live preview shows the effect in real time, and you can copy the finished CSS code with one click.
What is border-radius for?
The CSS propertyborder-radiusrounds the corners of an HTML element. You can give all four corners the same radius (e.g.8px) or set them separately in the order: top left, top right, bottom right, bottom left. A value of50%turns a rectangle into an ellipse or circle. The property works with buttons, tabs, avatars, images and any blocks.
How to use the generator?
Select the unit (pxor%), then enter the radius values for each corner. EnableRelated Cornersto change all at once. For advanced shapes, enableEllipticaland provide separate vertical values. Click "Generate CSS" - you'll see a preview of the shape and a ready-made CSS block to copy.
Syntax border-radius
Shortened notationborder-radius: TL TR BR BLtakes from 1 to 4 values. A single value (12px) rounds all corners equally. Two values (12px 4px) define top left + bottom right and top right + bottom left, respectively. Notation with a slash (20px / 10px) creates elliptical fillets with separate horizontal and vertical radii.
Units: px, %, em
Pixels (px) produce a consistent, predictable effect regardless of element size - perfect for buttons and form fields. Percentages (%) are calculated relative to the element's dimensions -50%will always result in a circle or ellipse.em/remunits scale with the font, which is useful in projects with flexible typography.
Typical uses of border-radius
- Cards- slight rounding (8-12 px) gives a modern look to content containers.
- Buttons -
border-radius: 6pxis a classic button;9999pxcreates a capsule (pill button). - Avatars/Profile Photos —
50%in a square gives a perfect circle. - Form fields - small rounding (4-6 px) improves the readability of inputs.
- Irregular Shapes- Different values on each corner create organic, "blob" shapes used in illustrations and banners.
FAQ
Does border-radius work on all browsers?
Yes. Theborder-radiusproperty is supported by all modern browsers (Chrome, Firefox, Safari, Edge) without the need for vendor prefixes. Prefixes-webkit-border-radiuswhether-moz-border-radiuswere needed in pre-2012 browsers and are no longer required.
What is the difference between border-radius and clip-path?
border-radiusrounds corners and affects the background, border, and shadow of an element.clip-pathcuts the element to any shape (polygon, ellipse, SVG path), but does not change the box model. For simple rounds,border-radiusis always better - it's simpler and more efficient.
How to set different radii for different corners?
Use four values separated by a space:border-radius: 10px 20px 15px 5px. ABOUT