Border Radius: Rounded Corners, Pills, and Circular Avatars0%

Box Shadows and Text Shadows: Depth and Elevation

Border Radius: Rounded Corners, Pills, and Circular Avatars

Beginner9 min read•Updated: 2026-10-01

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
How border-radius works under the hood
2
The 3 most popular UI patterns: Cards, Pill Buttons, and Circular Avatars
3
Styling individual corners for creative shapes (like speech bubbles and leaves)
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:

     SHARP CORNER (0px)                 ROUNDED CORNER (16px)
2 
     +───────────────                   ╭───────────────
     │                                 /   (Radius: 16px)
     │                                │
     │                                │

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!

Pro Tip

Fun Fact: You do not need a visible border for border-radius to work! Even if an element has no border, border-radius curves the background color and clipping boundary of the element.

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:

1.card {
2  background-color: white;
3  padding: 24px;
4  border: 1px solid #e2e8f0;
5  border-radius: 12px; /* Soft, modern curve */
6}
7 
8input[type="text"] {
9  border: 1px solid #cbd5e1;
10  border-radius: 6px;  /* Subtle curve for inputs */
11  padding: 8px 12px;
12}

Pattern 2: The Pill Button (Capsule Shape ⭐)

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

pill-btn {
background-color: #2563eb;
color: white;
padding: 12px 30px;
border: none;
border-radius: 9999px; /* Or 50px */
cursor: pointer;
font-weight: bold;
9}

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
The element must have equal width and height (a perfect square: width: 80px; height: 80px;).
2
Set border-radius: 50%;.

avatar-img {
width: 90px;
height: 90px;
border-radius: 50%; /* Makes a perfect square into a perfect circle! */
object-fit: cover;  /* Prevents the student's photo from stretching */
border: 3px solid #3b82f6;
7}

⚠️ 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;

1/* Creative Leaf Shape */
2.leaf-card {
3  border-radius: 30px 0 30px 0;
4}
5 
6/* Chat Message Bubble (Tail in bottom-left) */
7.chat-bubble {
8  background-color: #e0e7ff;
9  padding: 14px;
10  border-radius: 16px 16px 16px 0; /* Bottom-left stays sharp like a tail! */
11}

⚠️ 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?

1[ Broken: Image corners poke out! ]      [ Fixed: overflow: hidden ]
2+----+────────────────────────+----+     ╭────────────────────────╮
3|IMG |                        |IMG |     │                        │
4+----+                        +----+     │  Image neatly clipped  │
5╰──────────────────────────────────╯     ╰────────────────────────╯

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

card {
border-radius: 16px;
overflow: hidden; /* Clips any child images to match the rounded curve! */
4}

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

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
Setting `border-radius: 50%` on a rectangle (100px x 60px).	Ensure `width` and `height` are equal before setting `50%`.	Rectangles with 50% radius turn into squished ovals instead of circles.
Letting images poke out of rounded cards.	Add `overflow: hidden;` to the parent card.	Forces the inner image to conform to the parent's rounded corners.
Over-rounding cards to 50px so text gets cut off.	Keep cards between `8px` and `16px`.	Excessive radius on cards eats into internal content space.

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.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

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

Question 2

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

Question 3

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

Question 4

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

Question 5

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

Practice Challenge (Try It Yourself)

1
Open your code editor and create avatar-card.html.
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
Paste and test this code:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Border Radius Challenge</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 40px;
       display: flex;
       justify-content: center;
     }
14 
     .profile-card {
       width: 100%;
       max-width: 380px;
       background-color: white;
       border-radius: 16px;         /* Rounded Card */
       overflow: hidden;            /* Prevents bleed */
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
       text-align: center;
       padding-bottom: 24px;
     }
25 
     .card-header-bg {
       height: 90px;
       background: linear-gradient(135deg, #2563eb, #38bdf8);
     }
30 
     .avatar {
       width: 80px;
       height: 80px;
       border-radius: 50%;          /* Perfect Circle */
       background-color: white;
       border: 4px solid white;
       margin: -40px auto 12px auto; /* Pulls avatar up into header */
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 36px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
44 
     .badge-pill {
       display: inline-block;
       background-color: #dcfce7;
       color: #15803d;
       padding: 6px 16px;
       border-radius: 9999px;       /* Pill Badge */
       font-size: 12px;
       font-weight: bold;
       margin-bottom: 16px;
     }
55 
     .quote-bubble {
       background-color: #f8fafc;
       border: 1px solid #e2e8f0;
       padding: 14px;
       margin: 0 24px;
       border-radius: 12px 12px 12px 0; /* Chat Bubble tail */
       font-size: 14px;
       color: #475569;
       font-style: italic;
     }
   </style>
 </head>
 <body>
   <div class="profile-card">
     <div class="card-header-bg"></div>
     <div class="avatar">👩‍🎓</div>
     <h3>Ananya Deshmukh</h3>
     <div class="badge-pill">Head Girl 2026</div>
     <div class="quote-bubble">
       "Leading with empathy, excellence, and dedication to our school community."
     </div>
   </div>
 </body>
 </html>

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

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Box Shadows and Text Shadows: Depth and Elevation (Borders, Shadows and Rounded Corners).

👉 Continue to Next Lesson: Box Shadows and Text Shadows: Depth and Elevation →

Next Lesson

Box Shadows and Text Shadows: Depth and Elevation

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Border Styles, Colors, and Shorthand	Box Shadows and Text Shadows: Depth and Elevation

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Box Shadows and Text Shadows: Depth and Elevation

Border Radius: Rounded Corners, Pills, and Circular Avatars

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

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
How border-radius works under the hood
2
The 3 most popular UI patterns: Cards, Pill Buttons, and Circular Avatars
3
Styling individual corners for creative shapes (like speech bubbles and leaves)
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:

     SHARP CORNER (0px)                 ROUNDED CORNER (16px)
2 
     +───────────────                   ╭───────────────
     │                                 /   (Radius: 16px)
     │                                │
     │                                │

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!

Pro Tip

Fun Fact: You do not need a visible border for border-radius to work! Even if an element has no border, border-radius curves the background color and clipping boundary of the element.

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:

1.card {
2  background-color: white;
3  padding: 24px;
4  border: 1px solid #e2e8f0;
5  border-radius: 12px; /* Soft, modern curve */
6}
7 
8input[type="text"] {
9  border: 1px solid #cbd5e1;
10  border-radius: 6px;  /* Subtle curve for inputs */
11  padding: 8px 12px;
12}

Pattern 2: The Pill Button (Capsule Shape ⭐)

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

pill-btn {
background-color: #2563eb;
color: white;
padding: 12px 30px;
border: none;
border-radius: 9999px; /* Or 50px */
cursor: pointer;
font-weight: bold;
9}

Why `9999px`?

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
The element must have equal width and height (a perfect square: width: 80px; height: 80px;).
2
Set border-radius: 50%;.

avatar-img {
width: 90px;
height: 90px;
border-radius: 50%; /* Makes a perfect square into a perfect circle! */
object-fit: cover;  /* Prevents the student's photo from stretching */
border: 3px solid #3b82f6;
7}

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

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;

1/* Creative Leaf Shape */
2.leaf-card {
3  border-radius: 30px 0 30px 0;
4}
5 
6/* Chat Message Bubble (Tail in bottom-left) */
7.chat-bubble {
8  background-color: #e0e7ff;
9  padding: 14px;
10  border-radius: 16px 16px 16px 0; /* Bottom-left stays sharp like a tail! */
11}

⚠️ 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?

1[ Broken: Image corners poke out! ]      [ Fixed: overflow: hidden ]
2+----+────────────────────────+----+     ╭────────────────────────╮
3|IMG |                        |IMG |     │                        │
4+----+                        +----+     │  Image neatly clipped  │
5╰──────────────────────────────────╯     ╰────────────────────────╯

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

card {
border-radius: 16px;
overflow: hidden; /* Clips any child images to match the rounded curve! */
4}

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

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
Setting `border-radius: 50%` on a rectangle (100px x 60px).	Ensure `width` and `height` are equal before setting `50%`.	Rectangles with 50% radius turn into squished ovals instead of circles.
Letting images poke out of rounded cards.	Add `overflow: hidden;` to the parent card.	Forces the inner image to conform to the parent's rounded corners.
Over-rounding cards to 50px so text gets cut off.	Keep cards between `8px` and `16px`.	Excessive radius on cards eats into internal content space.

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.

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

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

Question 2

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

Question 3

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

Question 4

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

Question 5

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

Practice Challenge (Try It Yourself)

1
Open your code editor and create avatar-card.html.
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
Paste and test this code:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Border Radius Challenge</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 40px;
       display: flex;
       justify-content: center;
     }
14 
     .profile-card {
       width: 100%;
       max-width: 380px;
       background-color: white;
       border-radius: 16px;         /* Rounded Card */
       overflow: hidden;            /* Prevents bleed */
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
       text-align: center;
       padding-bottom: 24px;
     }
25 
     .card-header-bg {
       height: 90px;
       background: linear-gradient(135deg, #2563eb, #38bdf8);
     }
30 
     .avatar {
       width: 80px;
       height: 80px;
       border-radius: 50%;          /* Perfect Circle */
       background-color: white;
       border: 4px solid white;
       margin: -40px auto 12px auto; /* Pulls avatar up into header */
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 36px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
44 
     .badge-pill {
       display: inline-block;
       background-color: #dcfce7;
       color: #15803d;
       padding: 6px 16px;
       border-radius: 9999px;       /* Pill Badge */
       font-size: 12px;
       font-weight: bold;
       margin-bottom: 16px;
     }
55 
     .quote-bubble {
       background-color: #f8fafc;
       border: 1px solid #e2e8f0;
       padding: 14px;
       margin: 0 24px;
       border-radius: 12px 12px 12px 0; /* Chat Bubble tail */
       font-size: 14px;
       color: #475569;
       font-style: italic;
     }
   </style>
 </head>
 <body>
   <div class="profile-card">
     <div class="card-header-bg"></div>
     <div class="avatar">👩‍🎓</div>
     <h3>Ananya Deshmukh</h3>
     <div class="badge-pill">Head Girl 2026</div>
     <div class="quote-bubble">
       "Leading with empathy, excellence, and dedication to our school community."
     </div>
   </div>
 </body>
 </html>

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

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Box Shadows and Text Shadows: Depth and Elevation (Borders, Shadows and Rounded Corners).

👉 Continue to Next Lesson: Box Shadows and Text Shadows: Depth and Elevation →

Next Lesson

Box Shadows and Text Shadows: Depth and Elevation

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Border Styles, Colors, and Shorthand	Box Shadows and Text Shadows: Depth and Elevation

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

Border Radius: Rounded Corners, Pills, and Circular Avatars

The Cricket Ball & Compass Analogy 🏏

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

Pattern 2: The Pill Button (Capsule Shape ⭐)

Why 9999px?

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

The Two Golden Rules for Perfect Circles:

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

Styling Individual Corners (The Clockwise Rule)

Shorthand (Clockwise from Top-Left):

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

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

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

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Box Shadows and Text Shadows: Depth and Elevation

Related Lessons

Practice Quiz

Loading Page Content...

Border Radius: Rounded Corners, Pills, and Circular Avatars

The Cricket Ball & Compass Analogy 🏏

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

Pattern 2: The Pill Button (Capsule Shape ⭐)

Why 9999px?

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

The Two Golden Rules for Perfect Circles:

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

Styling Individual Corners (The Clockwise Rule)

Shorthand (Clockwise from Top-Left):

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

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

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

Quick Revision Summary

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Box Shadows and Text Shadows: Depth and Elevation

Related Lessons

Practice Quiz

Why `9999px`?

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

Why `9999px`?

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