Create custom rounded corners, circles, pills, blobs, and organic shapes visually. Copy production-ready CSS.
border-radius: 0px;
The CSS border-radius property rounds the corners of an element. It's one of the most commonly used CSS properties for modern UI design.
| Syntax | Description | Example |
|---|---|---|
border-radius: 10px | All 4 corners equal | |
border-radius: 10px 20px | TL+BR / TR+BL | |
border-radius: 10px 20px 30px | TL / TR+BL / BR | |
border-radius: 10px 20px 30px 40px | TL / TR / BR / BL | |
border-radius: 50% | Perfect circle (if square) | |
border-radius: 999px | Pill shape (any rect) |
Use the / separator to set horizontal and vertical radii independently:
border-radius: 50% 30% 60% 40% / 40% 60% 30% 50%
The values before / set horizontal radii, and values after set vertical radii. This creates organic, blob-like shapes perfect for modern design trends.
| Shape | CSS | Preview |
|---|---|---|
| Circle | border-radius: 50% | |
| Pill / Capsule | border-radius: 999px | |
| Leaf | border-radius: 10% 50% 10% 50% | |
| Drop | border-radius: 50% 0 50% 50% | |
| Blob | border-radius: 30% 70% 70% 30% / 30% 70% 70% 30% |
border-radius is supported in all modern browsers. No vendor prefixes needed since 2012. Works in Chrome, Firefox, Safari, Edge, and all mobile browsers.
Generate box shadows, gradients, flexbox layouts, and grid layouts visually.
Browse All Free Tools →CSS border-radius rounds the corners of an element's border box. A single value like border-radius: 8px rounds all four corners equally. Four values set top-left, top-right, bottom-right, and bottom-left individually. Using 50% on a square element creates a perfect circle. The / syntax sets different horizontal and vertical radii for elliptical corners.
The shorthand border-radius sets all corners in one declaration. Longhands set individual corners: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. The shorthand is preferred for consistent rounding; longhands are useful when only specific corners need custom values.
Set border-radius to 9999px or 100px — a value larger than the element's height. This creates fully rounded left and right ends while keeping the top and bottom straight, creating a pill or capsule shape. The exact value doesn't matter as long as it exceeds half the element's height.
Yes. Percentage values are calculated relative to the element's dimensions. 50% on a square creates a circle. On a rectangle, 50% creates an ellipse that fits the element. Percentage border-radius is useful for elements with dynamic sizes where you always want proportional rounding.
Use the extended border-radius syntax with / to set different horizontal and vertical radii for each corner: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. By assigning asymmetric values, you create irregular organic blob shapes. Animate these values in CSS keyframes to create smooth morphing blob animations.