CSS Border Radius Generator
Generate border-radius CSS with live preview. Set each corner in px.
Back to all tools on ToolForge
Live Preview
CSS Output
border-radius: 0 0 0 0;
About CSS Border Radius Generator
This tool generates CSS border-radius values with a live preview. Set each corner independently in pixels.
Border Radius Syntax
/* 4-value syntax (clockwise from top-left) */ border-radius: top-left top-right bottom-right bottom-left; /* Examples */ border-radius: 10px 20px 30px 40px; /* Different radius for each corner */ border-radius: 10px; /* All corners same radius */ border-radius: 10px 20px; /* top/bottom, left/right */ border-radius: 10px 20px 30px; /* top-left, left/right, bottom-right */ /* Elliptical corners */ border-radius: 20px / 10px; /* horizontal / vertical radius */
Common Border Radius Patterns
| Effect | CSS |
|---|---|
| Slight rounding | border-radius: 4px; |
| Medium rounding | border-radius: 8px; |
| Large rounding | border-radius: 16px; |
| Pill shape (rectangle) | border-radius: 999px; |
| Circle (square element) | border-radius: 50%; |
| Top corners only | border-radius: 10px 10px 0 0; |
Browser Support
Border-radius is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes needed.
Frequently Asked Questions
- How does the CSS border-radius property work?
- The border-radius property defines the radius of an element's corners. It accepts 1-4 values: 1 value applies to all corners, 2 values (top-left/bottom-right, top-right/bottom-left), 3 values (top-left, top-right/bottom-left, bottom-right), or 4 values (top-left, top-right, bottom-right, bottom-left) in clockwise order.
- What units can I use for border-radius?
- Border-radius accepts length units (px, em, rem, etc.) and percentages. Pixels provide fixed rounding, while percentages create proportional curves relative to the element's dimensions. Percentages over 50% create overlapping curves for pill-shaped effects.
- Can I create elliptical corners with border-radius?
- Yes, use the slash syntax: border-radius: horizontal-radius / vertical-radius. For example, border-radius: 20px / 10px creates elliptical curves that are 20px wide and 10px tall. You can also specify different horizontal and vertical radii for each corner.
- What is the maximum border-radius value?
- The maximum useful border-radius depends on the element size. For a square element, 50% creates a perfect circle. For rectangles, the maximum radius is limited by the shorter dimension. Values larger than half the element's width/height are clamped to the maximum possible radius.