How to Generate CSS Border Radius

The border-radius property seems simple — set a value and corners become round. But the full syntax supports eight values for creating complex organic shapes, and most developers never explore beyond border-radius: 8px. The CSS Border Radius Generator gives you visual controls to create everything from simple rounded corners to blob-like shapes, with the CSS code ready to copy.

Understanding border radius values

The border-radius shorthand accepts one to four values, following the same pattern as margin and padding. One value applies to all corners, two values set top-left/bottom-right and top-right/bottom-left, and four values set each corner individually in clockwise order starting from top-left.

What most developers do not realize is that each corner actually has two radii — horizontal and vertical. The full syntax uses a / separator: border-radius: 50px 30px / 20px 40px sets horizontal radii of 50px and 30px, and vertical radii of 20px and 40px. This creates elliptical corners rather than circular ones, which is how you produce organic, blob-like shapes.

The familiar border-radius: 50% for circles works because 50% of the width and 50% of the height create quarter-ellipses that meet in the middle. On a square element, this produces a circle. On a rectangular element, it produces an ellipse.

Tips and best practices

• Use rem or em units for scalable corners. Pixel values produce consistent corners regardless of font size, but relative units scale with the design, which is better for responsive layouts.
• Keep border radius proportional to element size. A border-radius: 4px that looks perfect on a small button looks barely rounded on a large card. Scale the radius with the element.
• Use the 8-value syntax for unique shapes. The / syntax lets you create organic, asymmetric shapes that feel more natural than standard rounded rectangles. These are popular for decorative elements and image masks.
• Combine with overflow: hidden. When applying border radius to containers with child elements, add overflow: hidden to clip children to the rounded shape. Without it, child content will extend past the curved corners.

Common issues

• Border radius not visible. If your element has no border, background, or box-shadow, the border radius has nothing to round. Add a background color or border to see the effect.
• Rounded corners clipping content. On elements with small dimensions and large border radius values, content can be clipped. Ensure your element has enough padding to keep content away from the curved edges.
• Inconsistent rendering with border-collapse. On tables using border-collapse: collapse, border radius is ignored. Use border-collapse: separate and apply border radius to the table element.