Border Radius Guide: Mastering Rounded Corners in CSS

What Is border-radius?

The CSS border-radius property rounds the corners of an element's outer border edge. You can round all four corners uniformly or control each corner independently. The property accepts length values (px, em, rem) and percentages, and each corner can have separate horizontal and vertical radii for elliptical curves.

Browser support is universal — every modern browser has supported border-radius without vendor prefixes since 2013.

Syntax and Shorthand

The border-radius shorthand follows a clockwise order: top-left, top-right, bottom-right, bottom-left.

/* 1 value: all corners equal */
border-radius: 8px;

/* 2 values: top-left+bottom-right, top-right+bottom-left */
border-radius: 8px 16px;

/* 3 values: top-left, top-right+bottom-left, bottom-right */
border-radius: 8px 16px 24px;

/* 4 values: top-left, top-right, bottom-right, bottom-left */
border-radius: 8px 16px 24px 32px;

Shorthand Value Mapping

Think of the pattern as mirroring: when you provide fewer than four values, the missing values mirror their diagonal opposites.

Individual Corner Properties

For granular control, use the longhand properties:

border-top-left-radius: 8px;
border-top-right-radius: 16px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 32px;

Each longhand property also accepts two values — the first for the horizontal radius, the second for the vertical — separated by a slash:

border-top-left-radius: 40px 20px;

This creates an elliptical corner instead of a circular one.

Elliptical Corners with the Slash Syntax

When you need different horizontal and vertical radii, use the / separator in the shorthand:

/* horizontal / vertical */
border-radius: 40px / 20px;

/* Different per corner */
border-radius: 40px 10px / 20px 5px;

The values before the slash define horizontal radii (clockwise). The values after define vertical radii (clockwise). This is how you create leaf and egg shapes.

Pixels vs. Percentages

The unit you choose changes the behavior significantly.

Pixel values produce predictable, consistent curves. Percentage values calculate the radius relative to the element's own width and height, which creates wildly different results on non-square elements.

Creating Common Shapes

Circle

A square element with 50% radius becomes a perfect circle.

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

The element must be square. If the width and height differ, you get an ellipse instead.

Ellipse

Any rectangular element with 50% radius becomes an ellipse.

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

Pill / Capsule

A pill shape requires a radius equal to or greater than half the shorter dimension.

.pill {
  height: 40px;
  border-radius: 9999px; /* or 20px if height is fixed */
  padding: 0 24px;
}

Using 9999px (or any absurdly large value) ensures the pill shape holds even if the element size changes. The browser clamps the radius at half the shorter side internally.

Leaf Shape

Combine two opposite corners with large radii to create a leaf or teardrop:

.leaf {
  border-radius: 0 80px 0 80px;
  background: #10B981;
}

Egg Shape

Use different horizontal and vertical radii on the top corners:

.egg {
  width: 120px;
  height: 160px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

The / splits horizontal from vertical. Taller vertical radii on top give the egg its wider upper curve.

Common UI Patterns

Rounded corners communicate hierarchy. Larger radii suggest approachability and softness; sharper corners suggest precision and formality.

Consistency matters more than the exact number. Pick a scale and apply it uniformly across your component library.

Responsive Considerations

Fixed pixel values stay the same across breakpoints. If you want corner sizes to adapt, use clamp():

.card {
  border-radius: clamp(8px, 1.5vw, 16px);
}

This scales the radius between 8px and 16px based on viewport width. It keeps small screens subtle and large screens expressive without breakpoint-specific overrides.

Dark Mode Notes

Rounded corners behave identically in light and dark modes, but the visual weight shifts. On dark backgrounds, high-radius shapes (circles, pills) draw more attention because the contrast between the shape and its background tends to be higher. Consider reducing radii slightly in dark mode if your UI feels too "floaty."

Key Takeaways

• The shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left
• Use the / syntax to set different horizontal and vertical radii for elliptical corners
• 50% on a square element creates a circle; on a rectangle, an ellipse
• 9999px is the standard trick for pill shapes that adapt to any size
• Percentages compute against element dimensions, not parent dimensions
• Pick a radius scale for your design system and apply it consistently
• clamp() lets you create responsive radii without media queries

Try It Yourself

Experiment with border-radius values interactively using our CSS Gradient Generator — combine rounded shapes with gradient backgrounds to prototype complete components. For precise color work on your shapes, try the Color Converter.

Related Guides

• CSS Rounded Corners Tutorial — Step-by-step walkthrough from basic rounding to complex multi-radius shapes
• CSS Shapes and Borders — Creative techniques combining border-radius with transforms and clip-path