▣ CSS Border Radius Generator

Complete Guide: CSS Border Radius Generator

The border-radius CSS property transforms sharp-cornered rectangles into shapes with rounded corners — and with its full syntax, can create ellipses, organic blobs, and fluid design system shapes. It is one of the most versatile layout properties in CSS, used everywhere from button styling to avatar image clipping to abstract decorative shapes.

The Shorthand: 1 to 4 Values

Like padding and margin, border-radius accepts 1 to 4 values following the same clockwise pattern:

• 1 value: All four corners — border-radius: 8px
• 2 values: Top-left & bottom-right, then top-right & bottom-left — border-radius: 8px 16px
• 3 values: Top-left, then top-right & bottom-left, then bottom-right — border-radius: 4px 12px 20px
• 4 values: Top-left, top-right, bottom-right, bottom-left — border-radius: 4px 8px 12px 16px

Individual Corner Properties

Each corner has its own longhand property for precise control:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

These are useful in responsive design when corners need to change at specific breakpoints without rewriting the full shorthand.

Elliptical Corners: The x/y Syntax

Each corner can have independent horizontal and vertical radii, creating elliptical curves. Use the slash (/) separator in the shorthand to specify both sets of values:

border-radius: 50px / 20px;

This creates an element with 50px horizontal radius and 20px vertical radius on all corners — an "egg" or "stadium" shape. For individual corners: border-top-left-radius: 50px 20px (no slash — space-separated).

Blob Shapes with All 8 Values

Organic, amoeba-like shapes can be created by specifying all 8 individual corner radii (four horizontal + four vertical):

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

The values before the slash are the horizontal radii for top-left, top-right, bottom-right, bottom-left. The values after the slash are the vertical radii in the same order. Animating these values with @keyframes creates a morphing blob animation widely used in modern web design.

Percentage Values and the Circle

Percentage values for border-radius are relative to the element's dimensions. border-radius: 50% on a square element (equal width and height) produces a perfect circle. On a non-square element, 50% produces an ellipse that fills the element. This technique is standard for avatar images and icon containers.

Fluid Border Radius in Design Systems

Modern design tokens often define border radius as a scale (e.g., --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-full: 9999px). Using 9999px for pill shapes is more robust than 50% because percentage values calculate per-axis against width and height separately, while a large pixel value always produces the maximum possible circular arc regardless of element dimensions.

Border Radius on Images

Applying border-radius to an <img> element alone clips the visual rendering, but the element still occupies its rectangular box for layout purposes. For consistent clipping behavior across browsers, combine with overflow: hidden on a wrapper, or use clip-path: circle() for more complex non-rectangular clips.

For adding depth through shadows to rounded elements, use the Box Shadow Generator. For animated loading placeholders with matching rounded corners, see CSS Loader.