CSS Rounded Corners

CSS Rounded Corners: Shaping Cards, Pills, and Avatars

The CSS border-radius property softens sharp box corners on cards, buttons, input fields, and profile images. You do not even need a visible border—border-radius curves backgrounds, shadows, and clipped child images cleanly on its own.

Border-Radius Syntax and Patterns

Like margin and padding, border-radius accepts one to four values starting from top-left clockwise (top-left top-right bottom-right bottom-left), or individual properties like border-top-left-radius:

• Cards & Buttons: border-radius: 8px; or 12px.
• Pill Badges & Search Bars: border-radius: 9999px; creates perfect half-circle ends regardless of button height.
• Circular Avatars: border-radius: 50%; turns any equal-width-and-height square into a circle.
• Chat Bubbles / Tabs: border-radius: 12px 12px 12px 0; curves three corners while keeping one sharp tail.

.card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.pill-btn {
    padding: 10px 22px;
    border-radius: 9999px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
}

.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

Nested Corner Math

When placing an inner banner inside a rounded outer card, subtract the card's padding from the outer radius (innerRadius = outerRadius - padding). Giving both 16px radius makes the inner corners look awkwardly pinched!

Common Mistakes to Avoid

• Using border-radius: 50% on wide rectangular buttons: 50% on a 200px x 44px button turns it into an ugly oval; always use 9999px for pill shapes and 50% only on squares.
• Forgetting overflow: hidden when placing full-bleed images inside rounded cards: Child images stick straight out over the rounded card corners unless clipped with overflow: hidden.
• Setting border-radius on table with border-collapse: collapse: Collapsed tables ignore border-radius; keep overflow: hidden on a rounded wrapper div around the table instead.

Frequently Asked Questions

Why does border-radius: 9999px work better than 50% for pills?

Because 50% computes half of width and half of height separately (forming an ellipse), whereas a large pixel value like 9999px automatically clamps to half of the shorter side, creating true semicircular caps.

Does border-radius affect CSS box-shadow?

Yes. Box shadows automatically follow the exact curved shape defined by border-radius.