Border Radius Controls
Live Preview
Preview Element
Generated CSS
.element {
border-radius: 10px;
}
Browser Support
Chrome:
4.0+
Firefox:
4.0+
Safari:
5.0+
Edge:
12.0+
CSS Properties
border-radius - Standardborder-top-left-radius - Individualborder-top-right-radius - Individualborder-bottom-left-radius - Individualborder-bottom-right-radius - IndividualPreset Shapes
Border Radius Guide
CSS Syntax:
- •
border-radius: 10px;- All corners - •
border-radius: 10px 20px;- Top-left/bottom-right, top-right/bottom-left - •
border-radius: 10px 20px 30px;- Top-left, top-right/bottom-left, bottom-right - •
border-radius: 10px 20px 30px 40px;- All corners individually
Best Practices:
- • Use consistent radius values across your design
- • Consider the element's size when setting radius
- • Test on different screen sizes
- • Use relative units (em, rem) for scalability
- • 50% creates perfect circles on square elements