Border Radius Generator
Free CSS border-radius generator. Match all corners or set each one, preview the shape, and copy the rule. Runs in your browser only.
Tool names, instructions and generated content may be provided in English.
border-radius: 24px;
About this tool
Preview pills, squircle cards or mixed corners for buttons and Discord-style panels. Link all corners or edit top-left through bottom-left separately.
Copy the border-radius line into your CSS. Values are in pixels.
How to use it
- Toggle same radius on every corner, or unlock to edit each corner.
- Drag the sliders while watching the preview.
- Copy the border-radius CSS.
FAQs
Can I use percentages?
This tool outputs pixels. For 50% circles, set a square box in CSS and use border-radius: 50%.
Does it write the four-value shorthand?
Yes, when corners differ: top-left, top-right, bottom-right, bottom-left.
Is anything uploaded?
No. There is no file input on this tool.