CSS — Rounded Corners

One property, instant modernization

.card { border-radius: 12px; }

Sharp rectangles read dated; soft corners read contemporary. It also shapes backgrounds, borders AND clips content.

The four-corner longhand

/* shorthand: top-left top-right bottom-right bottom-left (clockwise) */
.tab {
    border-radius: 12px 12px 0 0;    /* rounded top only */
}

.speech-bubble {
    border-radius: 16px 16px 16px 0; /* sharp corner pointing at speaker */
}

The three iconic values

.avatar { border-radius: 50%; }        /* perfect circle from any square */
.pill   { border-radius: 999px; }      /* fully-rounded button/chip */
.card   { border-radius: 8px; }        /* standard UI rounding */

50% on a square = circle. On a non-square it makes an ellipse — pair with equal width/height for avatars.

999px clamps to half the smaller side — the pill that survives any text length.

Elliptical corners

Two values per corner = horizontal/vertical radii:

.leaf {
    border-radius: 60% 40% / 40% 60%;
}

(Organic blob shapes — the liquid-glass aesthetic trick.)

Radius scale consistency

Pick a ladder and stick to it:

:root {
    --radius-sm: 4px;     /* inputs, tags       */
    --radius-md: 8px;     /* buttons, dropdowns */
    --radius-lg: 12px;    /* cards, modals      */
    --radius-full: 999px; /* pills, avatars     */
}

.btn   { border-radius: var(--radius-md); }
.modal { border-radius: var(--radius-lg); }

Mixed random radii look amateurish faster than any other styling mistake.

Clipping children — overflow matters

Radius only rounds backgrounds and borders unless you clip descendants:

.card {
    border-radius: 12px;
    overflow: hidden;    /* now the image inside gets clipped too */
}

<div class="card">
    <img src="photo.jpg" alt="">   <!-- corners follow card ✓ -->
    <p>Caption</p>
</div>

Without overflow: hidden, a full-width image pokes past the rounded corners.

Borders + radius interplay

.ring {
    border: 3px solid teal;
    border-radius: 16px;
}

Borders curve along the radius automatically. Concentric rings look right when inner radius = outer radius − border width.

Nested radius formula

For nested boxes sharing visual curvature:

inner radius = outer radius − padding/gap between them

.outer { border-radius: 20px; padding: 8px; }
.inner { border-radius: 12px; }   /* 20 − 8 keeps curves concentric */

Mini Practice

1. Square photo → circle avatar with a brand-colored ring.
2. Pill button that survives 3-word vs 10-word labels.
3. Tab bar with only top corners rounded.
4. Card with image clipped by overflow:hidden.
5. Speech bubble with one sharp tail corner.
6. Nested panels using the concentric-radius formula.

Next: border images →