Border Radius Previewer
Visualize and generate CSS border-radius values in real-time. Perfect for web designers and developers creating modern UI elements.
Preview
Border Radius Preview
Adjust sliders to see changes
Controls
Preset Shapes:
Slight Curve
Rounded
Circle
Pill Left
Pill Right
Semi-Circle
CSS Output
border-radius: 0px;
About Border Radius
The CSS border-radius property is used to add rounded corners to elements. It's an essential tool for creating modern, friendly user interfaces.
How to Use This Tool:
- Adjust individual corners using the top-left, top-right, bottom-right, and bottom-left sliders
- Use the "All Corners" slider to set all corners at once
- Try our preset shapes for common border-radius configurations
- Copy the generated CSS code to your stylesheet
CSS Syntax:
The border-radius property can have one to four values:
- One value:
border-radius: 10px;(all four corners) - Two values:
border-radius: 10px 20px;(top-left + bottom-right | top-right + bottom-left) - Three values:
border-radius: 10px 20px 30px;(top-left | top-right + bottom-left | bottom-right) - Four values:
border-radius: 10px 20px 30px 40px;(top-left | top-right | bottom-right | bottom-left)
Browser Support:
The border-radius property is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. For older browsers (Internet Explorer 8 and earlier), vendor prefixes may be needed.
