Border Radius Generator
Create CSS border-radius visually with live preview and code generation.
Presets
Preview
Corner Settings
CSS Code
border-radius: 12px;
📐 What is Border Radius Generator?
Border Radius Generator is a visual tool for editing CSS border-radius properties with instant preview. Adjust all four corners individually or link them for uniform changes, supporting both px and % units. Quickly create special shapes with presets like Pill, Drop, and Leaf, and see results in real-time. Perfect for styling buttons, cards, avatars, badges, and other UI elements.
📋 Understanding border-radius
| Syntax | Application Order | Example |
|---|---|---|
| 1 value | All corners equal | border-radius: 12px; |
| 2 values | TL+BR / TR+BL | border-radius: 12px 0; |
| 3 values | TL / TR+BL / BR | border-radius: 12px 8px 0; |
| 4 values | TL / TR / BR / BL | border-radius: 12px 8px 4px 0; |
💡 Corner Design Tips
- Perfect circle: Apply 50% to a square element (or half the width in px)
- Pill shape: Apply half the height or more (e.g., 9999px)
- Consistency: Use multiples of 4px in design systems (4, 8, 12, 16...)
- Accessibility: Ensure click areas are not too small
- Responsive: Consider smaller radius values on mobile
Frequently Asked Questions
What is the difference between px and % units?▼
px is an absolute value independent of element size. % is calculated relative to the element dimensions. Applying 50% makes a square into a circle and a rectangle into an ellipse.
What happens when corners overlap?▼
If the sum of adjacent corner radii exceeds the side length, browsers automatically scale them down proportionally. This can lead to unexpected results, so be careful.
How do I create elliptical corners?▼
Use a slash (/) in border-radius to specify different horizontal/vertical radii. For example, border-radius: 50% / 25%; creates elliptical corners.
What is Border Radius Generator?
Visually edit CSS border-radius properties. Control each corner individually or together, toggle between px and % units, and copy ready-to-use CSS code.