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.
Los nombres, instrucciones y contenidos generados de las herramientas pueden estar en inglés.
border-radius: 24px;
Acerca de esta herramienta
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.
Cómo usarla
- Toggle same radius on every corner, or unlock to edit each corner.
- Drag the sliders while watching the preview.
- Copy the border-radius CSS.
Preguntas frecuentes
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.