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.
- Dans votre navigateur
- Rien n’est envoyé
- Sans compte
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.