Border Radius: Rounded Corners, Pills, and Circular Avatars

In the early days of the web, every single box, button, and image had sharp, 90-degree razor corners like an old iron trunk box. 🗃️

Today, look at your smartphone screen, YouTube cards, Instagram buttons, and school ID badges: almost everything has soft, friendly, and elegant curved corners.

In CSS, the property that rounds off corners is called border-radius.

In this lesson, you will master:

1. 1
   How border-radius works under the hood
2. 2
   The 3 most popular UI patterns: Cards, Pill Buttons, and Circular Avatars
3. 3
   Styling individual corners for creative shapes (like speech bubbles and leaves)
4. 4
   Why overflow: hidden is essential when rounding card images

The Cricket Ball & Compass Analogy 🏏

How does the browser calculate a rounded corner?

Imagine taking a geometry compass, placing it inside the corner of a square piece of cardboard, and drawing a circular arc of radius R:

• When border-radius: 0; → The corner is a sharp 90-degree point.
• When you increase the radius (e.g., 8px, 16px, 24px) → The corner curves more gently!

Pattern 1: Subtle Modern Card Corners (8px to 16px)

The most common use of border-radius in modern web design is giving cards, modals, and text inputs a soft, welcoming feel:

Pattern 2: The Pill Button (Capsule Shape ⭐)

Have you seen pill-shaped buttons on YouTube, Spotify, or Netflix with completely semi-circular ends?

Why 9999px?

If you give border-radius a number much larger than the height of the button (like 50px or 9999px), the browser automatically caps the curve to a perfect semicircle on both ends, creating an indestructible pill shape regardless of how wide the button stretches!

Pattern 3: The Perfect Circular Avatar (50% ⭐)

How do platforms like Google, WhatsApp, and GitHub make student profile pictures display as perfect circles?

The Two Golden Rules for Perfect Circles:

1. 1
   The element must have equal width and height (a perfect square: width: 80px; height: 80px;).
2. 2
   Set border-radius: 50%;.

⚠️ Common Beginner Trap: The Oval / Egg Shape!

If your image is width: 120px and height: 80px (a rectangle), setting border-radius: 50% will turn it into an oval or egg shape, NOT a circle! The width and height must be strictly equal.

Styling Individual Corners (The Clockwise Rule)

You can round each corner independently:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Shorthand (Clockwise from Top-Left):

border-radius: top-left top-right bottom-right bottom-left;

⚠️ The Card Image Bleed Bug (and How to Fix It!)

Have you ever created a card with border-radius: 16px, placed an image at the top of the card, and noticed that the image's square corners poke out past the card's rounded border?

The Fix: Add overflow: hidden; to the Card!

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

• border-radius curves the corners of an element.
• You do not need a border property for border-radius to work.
• Subtle curves on cards typically range between 8px and 16px.
• Pill buttons use a large radius like 9999px or 50px.
• Circular avatars require equal width and height plus border-radius: 50%.
• Individual corners follow clockwise order: Top-Left → Top-Right → Bottom-Right → Bottom-Left.
• Use overflow: hidden on parent cards to prevent inner images from bleeding out.

Practice Quiz

Test your understanding with these multiple-choice questions:

1. Which CSS property value transforms a 100px by 100px square image into a perfect circle?

A. border-style: circle; B. border-radius: 50%; C. border-shape: round; D. border-radius: 100px; Answer: B Explanation: When applied to an element with equal width and height, border-radius: 50% curves all corners completely, forming a perfect circle.

2. What shape results if you apply border-radius: 50%; to an image that is 200px wide and 100px tall?

A. A perfect circle B. An oval / ellipse C. A square D. A triangle Answer: B Explanation: If width and height are unequal, a 50% radius produces an oval (egg) shape rather than a circular avatar.

3. Which declaration creates a capsule-shaped "pill" button with fully rounded ends?

A. border-radius: 9999px; B. border-radius: 2px; C. border-style: pill; D. border-width: 50%; Answer: A Explanation: A very high border-radius value like 9999px (or 50px) curves the shorter ends into perfect semicircles, creating a pill button.

4. Following the 4-value shorthand, which corner is targeted by the FIRST value in border-radius: 20px 10px 5px 0;?

A. Top-Right B. Top-Left C. Bottom-Right D. Bottom-Left Answer: B Explanation: The 4-value border-radius shorthand starts at the Top-Left corner and proceeds clockwise: Top-Left, Top-Right, Bottom-Right, Bottom-Left.

5. Why do image corners sometimes poke out past the rounded corners of a parent card, and how is it resolved?

A. The image resolution is too high; compress the image B. Child elements do not automatically clip to parent curves; add overflow: hidden; to the parent container C. The image is in PNG format; change it to JPEG D. Increase the border-width to 50px Answer: B Explanation: Adding overflow: hidden; to the parent container instructs the browser to clip all child contents (including header images) strictly within the parent's rounded boundary.

Practice Challenge (Try It Yourself)

1. 1
   Open your code editor and create avatar-card.html.
2. 2
   Build a modern student council card featuring:

• A rounded card with overflow: hidden;
• A circular avatar with a blue border
• A pill-shaped status badge
• A speech bubble quote

1. 1
   Paste and test this code:

1. 1
   Open the file in your browser to admire how the card, circle, pill, and speech bubble all demonstrate the versatility of border-radius! 🎯