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.
Les noms, instructions et contenus générés des outils peuvent être en anglais.
border-radius: 24px;
À propos de cet outil
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.
Comment l’utiliser
- Toggle same radius on every corner, or unlock to edit each corner.
- Drag the sliders while watching the preview.
- Copy the border-radius CSS.
FAQ
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.