CSS Border Radius Generator

The border-radius property is one of the most commonly used CSS features for creating rounded corners on elements. It accepts values in pixels (px), percentages (%), or em units. A single value applies to all four corners; multiple values let you control each corner independently. Percentages are relative to the element's dimensions, making them ideal for responsive designs where you want corners to scale with the element size.

border-radius does not affect layout—it only changes how the element's corners are drawn. The property works with backgrounds, borders, and box-shadow, and it clips content to the rounded shape. For images and complex backgrounds, the rounded corners create a clean, modern look.

The shorthand syntax follows the same pattern as margin and padding: one value for all corners, two values for top-left+bottom-right and top-right+bottom-left, three values for top-left, top-right+bottom-left, and bottom-right, and four values for each corner in clockwise order. For elliptical corners, use a slash: border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px defines horizontal radii first, then vertical radii. This lets you create asymmetric curves, like a leaf or teardrop shape.

Beyond simple rounded rectangles, border-radius can create circles (50% on a square), pills (50% on a rectangle), and organic shapes. A leaf shape uses 100% on one corner and 0 on the others. A teardrop or drop shape rounds the top corners and leaves the bottom sharp. Squircles—shapes between squares and circles—can be approximated with border-radius around 24–30%. Combine with clip-path or SVG for even more complex shapes. Our generator includes presets for Circle, Pill, Rounded Rectangle, Squircle, Leaf, and Drop.

border-radius has excellent support in all modern browsers. No vendor prefixes are needed. For older browsers, elements will display with square corners—ensure your design degrades gracefully. Performance is not a concern; border-radius is GPU-accelerated. When using percentages, remember they're relative to both width and height, so 50% on a 200×100 box creates different corner sizes. Prefer consistent units within a design system (e.g., all px or all rem) for maintainability.