Border Radius Generator
Design rounded corners visually; set all four corners together or individually.
Design rounded corners easily
For buttons, cards, images and form fields, border-radius is a detail that defines the character of an interface. The Border Radius Generator lets you adjust corners with sliders and see the shape in a live preview.
Features
- Set all four corners with one value or each corner separately
- Pixel (px) or percentage (%) units
- Compact CSS output without needless repetition
Creative shapes
Use percentages for circles and pills, or different corner values for asymmetric shapes like speech bubbles or leaves.
How to use Border Radius Generator
- Choose to set corners together or individually.
- Adjust the radius values with the sliders.
- Pick px or % units.
- Copy the CSS code.
Why use this tool?
Speeds up design by letting you tune corners by eye and get the code instantly.
FAQ
Can I use percentages?
Yes. Switch the unit to % to create circles and pill shapes that scale with the element.
How do I turn a square into a circle?
border-radius: 50% turns a square element into a perfect circle.
I want to round the image file itself.
Use Round Image Corners to give the file permanent rounded corners.
Related tools
Box Shadow Generator
Create CSS box-shadow values with offset, blur, spread, colour and inset controls.
Open toolCSS Gradient Generator
Design linear and radial CSS gradients with multiple colour stops and a live preview.
Open toolCSS Minifier
Shrink your CSS files by removing comments and unnecessary whitespace.
Open toolColor Code Converter
Convert colours between HEX, RGB and HSL with a live preview; alpha is supported.
Open tool