CSS Advanced

CSS Rounded Corners

The border-radius property rounds the corners of an element's outer border edge. With one value you round every corner equally; with more values you shape each corner independently, and you can even create perfect circles, pills, and organic blob shapes.

What is border-radius?

border-radius controls how sharp or soft an element's corners look. It accepts lengths (px, em, rem) or percentages, and it rounds the visible border, background, and box-shadow to match.

Basic syntax

.card {
  border-radius: 12px;        /* all four corners */
}

One to four values

Like margin and padding, border-radius is a shorthand. The number of values you give changes which corners are affected.

Values	Order applied
1 value	all four corners
2 values	top-left & bottom-right, then top-right & bottom-left
3 values	top-left, then top-right & bottom-left, then bottom-right
4 values	top-left, top-right, bottom-right, bottom-left (clockwise)

Try it: four different corners

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; display: flex; gap: 16px; flex-wrap: wrap; padding: 20px; }
  .box {
    width: 120px; height: 120px;
    color: #fff; display: flex;
    align-items: center; justify-content: center;
    font-weight: bold; text-align: center;
  }
  .all    { background: #6366f1; border-radius: 20px; }
  .two    { background: #ec4899; border-radius: 40px 0; }
  .four   { background: #10b981; border-radius: 8px 40px 8px 40px; }
</style>
</head>
<body>
  <div class="box all">20px</div>
  <div class="box two">40px 0</div>
  <div class="box four">mixed</div>
</body>
</html>

Circles and pills

A border-radius of 50% turns a square into a circle. On a wider-than-tall element, a very large radius (or 999px) creates a pill shape, which is popular for buttons and tags.

Try it: circle, pill, and badge

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; display: flex; gap: 20px; align-items: center; padding: 30px; background: #0f172a; }
  .circle {
    width: 110px; height: 110px;
    background: radial-gradient(circle at 30% 30%, #fbbf24, #f97316);
    border-radius: 50%;
  }
  .pill {
    padding: 12px 28px;
    background: #22d3ee; color: #06283d;
    border-radius: 999px; font-weight: bold; border: none;
  }
  .badge {
    background: #ef4444; color: #fff;
    padding: 4px 12px; border-radius: 999px;
    font-size: 13px; font-weight: bold;
  }
</style>
</head>
<body>
  <div class="circle"></div>
  <button class="pill">Rounded Button</button>
  <span class="badge">NEW</span>
</body>
</html>

Elliptical corners

Using a slash you can give each corner two radii: horizontal before the slash and vertical after it. This produces stretched, elliptical curves instead of perfect quarter-circles.

Elliptical syntax

.leaf {
  /* horizontal radii / vertical radii */
  border-radius: 60px 10px 60px 10px / 20px 40px 20px 40px;
}

💡

Set border-radius on an <img> to round photos, or on a container with overflow: hidden to clip child content to the rounded shape.

⚠️

Percentages are relative to the element's own width (horizontal) and height (vertical). On a non-square box, 50% gives an ellipse, not a circle.

Key points

border-radius accepts lengths or percentages.
One value rounds all corners; four values go clockwise from top-left.
50% on a square makes a circle; a large radius makes a pill.
A slash defines separate horizontal and vertical radii for ellipses.
Combine with overflow: hidden to clip children to the rounded shape.