Border Radius Previewer
Visually edit CSS border-radius with sliders, presets, and a live preview — copy the CSS with one click
border-radius: 20px;Presets
Color
Width
Height
Border Radius Previewer
Visually edit CSS border-radius with sliders, presets, and a live preview — copy the CSS with one click
Features
- Visual live preview of border-radius
- Individual corner controls with link option
- 8 built-in presets (pill, blob, leaf, etc.)
- px and % unit support
- Customizable box size and color
- Copy CSS with one click
How to use
- Drag the sliders to adjust each corner.
- Or click a preset for quick shapes.
- Copy the generated CSS property.
Tips & Best Practices
- Use the Pill preset for buttons and badges.
- Unlink corners to create organic blob shapes.
- 50% on a square creates a perfect circle.
FAQ
What is border-radius?
CSS border-radius rounds the corners of an element. You can set all corners equally or control each independently.
When should I use % vs px?
Use px for fixed rounding. Use % for shapes relative to the element size — 50% creates a circle on a square element.