CSS Border Radius Generator

The CSS border-radius property is one of the most widely used properties in modern web design. It transforms sharp-cornered rectangles into smooth, friendly shapes — from subtle 4px rounding on buttons to fully circular avatars and complex organic blobs. Understanding how to use border-radius effectively, including its less-known individual corner syntax, gives you complete control over the shape of every element on your page.

How CSS Border Radius Works

The border-radius shorthand accepts one to four values. One value applies to all four corners equally. Two values apply the first to the top-left and bottom-right corners, and the second to top-right and bottom-left. Three values apply to top-left, then top-right and bottom-left together, then bottom-right. Four values apply to each corner individually in clockwise order: top-left, top-right, bottom-right, bottom-left.

Individual corner properties — border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius — let you set each corner independently without the shorthand syntax, which is useful when overriding specific corners in responsive designs.

Elliptical Border Radius

Each corner of border-radius can actually accept two values separated by a slash — a horizontal radius and a vertical radius — creating an elliptical curve rather than a circular arc. The shorthand syntax for this is border-radius: 10px 20px / 20px 10px. This powerful feature is used to create organic, blob-like shapes that are popular in modern illustration-driven web design. Combine different horizontal and vertical radii across all four corners to produce truly unique, flowing shapes.

Creating a Circle with Border Radius

To create a perfect circle, set border-radius: 50% on an element with equal width and height. This is the standard technique for circular avatar images, icon containers, and status indicators. For a pill or capsule shape — full rounding on the left and right ends — use border-radius: 999px (or any value larger than half the element's height), which is the standard approach for tags, badges, and pill-shaped buttons.

Border Radius and Performance

Rounded corners via CSS are rendered entirely by the browser's GPU-accelerated compositor, making them extremely performant compared to the old technique of using multiple background images to fake rounded corners. There is no meaningful performance difference between border-radius: 4px and border-radius: 50%. However, animating border-radius can trigger layout and paint in some browsers — use the transform and opacity properties for animations wherever possible and reserve border-radius changes for non-animated states.

Responsive Border Radius with Clamp

For responsive designs, consider using clamp() with border-radius: border-radius: clamp(8px, 2vw, 20px). This ensures corners scale appropriately from small mobile screens to large desktop monitors, avoiding the jarring effect of corners that look proportionally too large or too small at different viewport sizes.

Common Border Radius Design Patterns

Card components typically use 8–16px border radius for a modern, approachable look. Buttons often use 6–12px for a contained style, or 999px for pill buttons. Input fields usually mirror the button radius to maintain visual consistency. Modal dialogs and toast notifications typically use 12–16px. Profile images and avatars are almost always circular at 50%. Progress bars and tag elements commonly use 999px for full pill rounding.

How to Use the Border Radius Generator

Use the sliders to adjust each corner independently, or check "Link all corners" to apply uniform rounding. Choose a preview fill colour that matches your design context to see exactly how the shape will look. The CSS output updates in real time. Copy the generated border-radius value and paste it directly into your stylesheet. The output uses the four-value shorthand format for maximum compatibility and precision.