TooldenTOOLDENDEVELOPERON-DEVICE
Border Radius Generator
Round the corners of any box, all four at once or each independently, with a live preview and copy-ready CSS.
HOW TO USE
- 1Keep "Link all corners" on to round every corner with a single value. The CSS output uses the border-radius shorthand.
- 2Turn linking off to set top-left, top-right, bottom-right and bottom-left independently, e.g. for a speech-bubble shape.
- 3Watch the preview update live as you change any corner.
- 4Copy the generated border-radius declaration with one click.
EXAMPLE
INPUT
top-left: 10px, top-right: 20px, bottom-right: 30px, bottom-left: 40px
OUTPUT
border-radius: 10px 20px 30px 40px;
FAQ
What does the four-value syntax mean?
The values run clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. When all four are equal, the CSS can be shortened to a single value.
Can I make a circle or a pill?
Set every corner to half the element size for a circle, or make the corners very large. Any value above half the side length clamps to a full curve, which creates the pill shape.
Does border-radius work on images?
Yes, the property applies to any element, including img elements, as long as the browser clips it. Combine it with overflow: hidden for perfect clipping.
Can I use percentages?
The generator emits px values. Percentages are valid in border-radius too, 50% on every corner gives a circle regardless of the element size.
Is my data sent anywhere?
No. All code is generated entirely in your browser, your settings never leave your device.