border-radius

Definition

The border-radius CSS property is used to round the corners of an element. It can take one value for a uniform radius across all corners or multiple values for individual corners. For example, border-radius: 10px; applies a 10-pixel rounded edge to all corners of the element, while border-radius: 10px 5px 15px 20px; applies different radii for the top-left, top-right, bottom-right, and bottom-left corners respectively.

Syntax

.card {
  border-radius: 1rem;
}

Values

<length> or <percentage>: control horizontal radii.
Two-value syntax (a / b): set horizontal and vertical radii independently.
Up to four values map to top-left, top-right, bottom-right, bottom-left corners.
inherit, initial, unset: participate in cascade.

Practical Examples

.pill {
  border-radius: 9999px;
}

.card {
  border-radius: 1.5rem;
}

.card--cut {
  border-radius: 2rem 0 2rem 0;
}

Rounded corners soften UI elements, while asymmetrical radii create unique visual treatments.

HTML

0.5rem

pill

asymmetric

Code

<div class="flex flex-wrap gap-4">
  <div class="w-32 rounded-lg border border-slate-200 bg-white p-4 text-center text-sm text-slate-700 shadow-sm" style="border-radius: 0.5rem;">0.5rem</div>
  <div class="w-32 rounded-full border border-slate-200 bg-white p-4 text-center text-sm text-slate-700 shadow-sm" style="border-radius: 9999px;">pill</div>
  <div class="w-32 border border-slate-200 bg-white p-4 text-center text-sm text-slate-700 shadow-sm" style="border-radius: 1.5rem 0 1.5rem 0;">asymmetric</div>
</div>

Tips & Best Practices

Use CSS custom properties to keep radii consistent across a design system.
Pair with overflow: hidden when clipping media inside rounded containers.
Experiment with elliptical radii (a / b syntax) for organic card shapes.

Accessibility & UX Notes

Rounded corners can guide focus but ensure interactive boundaries remain clear for users with motor impairments.

Browser Support

Supported broadly. Elliptical syntax (a / b) works in modern browsers; legacy IE<9 lacks support.

clip-path for complex shapes beyond rounded rectangles.
mask-image for organic silhouettes.
overflow to control how content respects rounded edges.