CSS border-radius: The Complete Guide to Rounded Corners

border-radius is one of the most used CSS properties — from the subtle 4px on a text input to the 50% that makes a perfect circle. But it goes much deeper than most developers realise. This guide covers the full syntax including the elliptical / notation, organic blob shapes, animations, and the patterns used in every major design system.

The Syntax

border-radius sets the radius of the corners of an element's border box. Each corner can have its own value, and each corner can even have separate horizontal and vertical radii using the / separator.

CSS

/* All four corners equal */
border-radius: 16px;

/* Top-left+bottom-right / top-right+bottom-left */
border-radius: 16px 8px;

/* TL / TR+BL / BR */
border-radius: 16px 8px 4px;

/* All four corners individually: TL TR BR BL */
border-radius: 8px 16px 24px 4px;

Shorthand Values

The shorthand follows the same clockwise pattern as margin and padding: top-left, top-right, bottom-right, bottom-left. The browser automatically collapses the value when corners match:

Values	Meaning	Example
1 value	All four corners equal	border-radius: 16px
2 values	TL+BR / TR+BL	border-radius: 16px 8px
3 values	TL / TR+BL / BR	border-radius: 16px 8px 4px
4 values	TL TR BR BL (clockwise)	border-radius: 8px 16px 4px 24px

Longhand Properties

Each corner has its own longhand property. These are useful when you want to override a single corner in a component or when building utility classes:

CSS

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* Same as: border-radius: 12px 12px 0 0; (tab shape) */

Elliptical Corners

The / separator splits the value into horizontal radii (before the slash) and vertical radii (after). This makes each corner an ellipse rather than a circle:

CSS

/* Perfect circle on a square */
border-radius: 50%;

/* Ellipse — wider than tall */
border-radius: 50% / 25%;

/* Elliptical corners per-axis */
border-radius: 30px 50px / 15px 25px;

/* Pill / capsule — always rounded ends */
border-radius: 999px;

Circle (50%) · Pill (999px) · Ellipse (40% / 30%)

Common Design Patterns

CSS

/* Cards — modern SaaS style */
.card { border-radius: 16px; }

/* Buttons — subtle */
.btn { border-radius: 8px; }

/* Pill buttons */
.btn-pill { border-radius: 999px; }

/* Avatar / profile image */
.avatar { border-radius: 50%; }

/* Tab — rounded top only */
.tab { border-radius: 10px 10px 0 0; }

/* Input fields */
.input { border-radius: 8px; }

/* Badges / chips */
.badge { border-radius: 6px; }

/* Modal dialogs */
.modal { border-radius: 20px; }

/* Image with rounded right side */
.img-right { border-radius: 0 16px 16px 0; }

Organic Blob Shapes

The elliptical / syntax with different values on each corner creates the organic blob shapes popular in illustration-heavy UIs and hero sections:

CSS

/* Classic blob */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Animated morphing blob */
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%       { border-radius: 50% 60% 30% 60% / 30% 40% 60% 50%; }
  75%       { border-radius: 40% 70% 60% 30% / 60% 40% 50% 30%; }
}

.blob-animated {
  animation: morph 8s ease-in-out infinite;
}

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

Animating border-radius

border-radius is fully animatable. It only triggers a repaint (not a layout reflow), so it is cheaper to animate than properties like width or height. Use transition for hover effects and @keyframes for continuous morphing:

CSS

/* Hover: rectangle to circle */
.shape {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  transition: border-radius 0.4s ease;
}
.shape:hover {
  border-radius: 50%;
}

How to Generate Any Shape with CSSTools.io

Writing elliptical border-radius values by hand — especially for blobs — is tedious. The Border Radius Generator gives you visual controls for all four corners and the elliptical / syntax.

Start with a preset

Open the Border Radius Generator and click any preset tile — card (16px), pill (999px), tab (12px 12px 0 0), or blob. Presets are starting points you can customise.

Switch to Individual mode for asymmetric corners

Click the Individual tab and select each corner to set it independently. Click the corner button (Top Left, Top Right, etc.) and drag the slider. The preview updates live.

Use Elliptical mode for blobs

Switch to Elliptical mode and adjust the horizontal and vertical radius sliders. This is the visual interface for the border-radius: H / V syntax without memorising the four-pair notation.

Toggle px vs %

Use the px/% toggle to switch between fixed and proportional values. % is essential for circles and blobs where the radius should scale with the element size.

Copy the CSS

Hit Copy Code. The output is a single border-radius declaration — paste it directly into your stylesheet, design system token, or component file.

Generate any border-radius value visually

Uniform, individual corners, elliptical, or blob. Preview on rectangle, square, or wide shapes.

Open Border Radius Generator →