CSS Rounded Corners Tutorial

Rounded Corners Make Everything Better

Sharp 90-degree corners look dated. A subtle border-radius softens edges, signals affordance on buttons, and adds visual polish to any container. This tutorial walks you from basic rounded corners to organic blob shapes — with code you can copy straight into your project.

Basic Rounded Corners

The simplest case: one value rounds every corner by the same amount.

.card {
  border-radius: 12px;
}

12–16px is the sweet spot for cards. Use 6–8px for buttons and inputs. The rounding stays consistent regardless of element size because pixel values are fixed.

Unit Quick Reference

Asymmetric Corners

Four different values give each corner its own personality. The order is clockwise: top-left, top-right, bottom-right, bottom-left.

.asymmetric-card {
  border-radius: 24px 4px 24px 4px;
}

This creates a "ticket stub" look — two prominent curves on the left and right edges with tight corners top-right and bottom-left. It works well for promo badges, tags, and feature callouts.

When to Go Asymmetric

• Draw attention to one corner of a card
• Create visual rhythm in a list of items
• Mimic physical objects like tags or folded paper

Avoid mixing more than two radius values in a single component. A 24px 4px 24px 4px pattern reads as intentional. A 24px 8px 16px 4px pattern reads as a mistake.

Pill and Stadium Shapes

When the radius equals or exceeds half the element height, the corners meet in the middle — producing a pill shape.

.pill-button {
  border-radius: 9999px;
  padding: 10px 24px;
}

Using 9999px (or any very large value) guarantees a pill regardless of the element's actual height. You never need to calculate half-height manually.

Pill vs Circle

A pill stretches horizontally or vertically. A circle requires equal width and height plus 50%.

Leaf and Blob Shapes

Push the slash syntax further and you create organic, leaf-like shapes. The slash separates horizontal from vertical radii.

.leaf {
  border-radius: 0 50% 50% 50%;
}

.blob {
  border-radius: 60% 40% 50% 70% / 50% 60% 40% 50%;
}

The .leaf class rounds three corners and leaves one sharp — producing a teardrop or leaf silhouette. The .blob class uses eight independent values (four horizontal, four vertical) for an organic, asymmetrical blob.

Blob shapes pair well with solid background colors or subtle gradients. Avoid putting text inside a blob unless the container is large — the curved edges eat into the readable area quickly.

Rule of Thumb

• Leaf shape: round 3 corners, leave 1 sharp
• Blob shape: use different percentages for every value
• Keep all blob percentages between 25% and 75% for pleasing results
• Always test with actual content — blobs compress inner space

Responsive Border Radius

Percentage-based radii scale with the element. This matters when components resize across breakpoints.

.responsive-card {
  border-radius: 5%;
}

On a 400px-wide card, 5% equals 20px. On a 600px card, it equals 30px. The rounding grows proportionally, keeping the visual weight consistent.

If the rounding feels too aggressive on large screens, cap it with min():

.responsive-capped {
  border-radius: min(5%, 24px);
}

This scales the radius up to 24px, then stops. You get responsive behavior on small screens and a fixed cap on large ones.

Combining with Box Shadow

Rounded corners and box shadows amplify each other. A rounded card with layered shadows looks elevated and tactile.

.elevated-card {
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

Shadow Tips for Rounded Elements

• The shadow follows the border-radius — no extra work needed
• Tight shadows (small offset) reinforce the edge; diffused shadows (large offset) suggest elevation
• In dark mode, increase shadow opacity to 0.3–0.4 so shadows remain visible against dark surfaces

Hover Elevation Effect

.hover-card {
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}

.hover-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

The radius stays constant while the shadow deepens on hover. This creates the illusion of the card lifting off the page.

Overflow and Clipping

Rounded corners clip the background automatically, but child elements spill past the curve. Add overflow: hidden to enforce clipping on content.

.image-card {
  border-radius: 16px;
  overflow: hidden;
}

Without overflow: hidden, images and absolutely-positioned children ignore the rounding. This is one of the most common visual bugs in card layouts.

Key Takeaways

• Use 12–16px for card corners and 6–8px for buttons — consistent sizing beats experimentation
• Four values in shorthand map clockwise from top-left
• border-radius: 9999px creates a pill; 50% on a square creates a circle
• The slash syntax (horizontal / vertical) unlocks leaf and blob shapes
• Percentage radii scale with element size — cap them with min() if needed
• Always add overflow: hidden when rounded containers hold images or overflow content
• Layer two box shadows with rounded corners for convincing depth

Try It Yourself

Experiment with individual corner values and see the shape update in real time with our Border Radius Generator. Pair your rounded shapes with polished elevation using the CSS Box Shadow Generator — then copy both rules straight into your stylesheet.