Loading...

CSS Border Radius

You can draw a sharp border around a box. Often the design wants softer corners — cards that feel friendly, buttons that look modern, avatars that read as circles. That is border-radius: how much each corner curves.

What does border-radius do?

border-radius rounds the corners of an element’s border box. The curve applies to the border line and the background (and usually the image/overflow clip). A bigger length means a rounder corner. The unit is usually px or %.

One value — all four corners

The everyday start: one length for every corner.

Same radius on every corner

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}

What you should notice

The border follows the curve, and the white fill stays inside the rounded shape. Radius is not a second border — it shapes the existing box.

Shorthand: how many values?

You can pass one, two, three, or four lengths. Corners are read in a fixed order.

📊 border-radius value counts

Values Meaning Everyday note
1 All four corners the same Soft cards and panels
2 Top-left + bottom-right, then top-right + bottom-left Diagonal pairing
3 Top-left, top-right + bottom-left, bottom-right Less common — know it exists
4 Top-left, top-right, bottom-right, bottom-left Full control, clockwise from top-left

Four corners, four numbers

When each corner needs its own curve, list four values clockwise starting at the top-left.

Four different corners

css
CSS Code 
.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

Two values — diagonal pairs

Two lengths pair opposite corners: first is top-left and bottom-right; second is top-right and bottom-left.

Two-value diagonal radius

css
CSS Code 
.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}

Pill buttons

A large radius (often half the height, or a big value like 999px) turns a rectangle into a pill — common for chips and primary actions.

Pill-shaped button

css
CSS Code 
.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}

Circular avatars

For a true circle, give the box equal width and height, then border-radius: 50%. On a non-square box, 50% makes an ellipse instead.

Circle with 50 percent radius

css
CSS Code 
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* clips a photo inside the circle */
}

Try it yourself

  1. Soften a bordered card with border-radius: 12px.
  2. Style a badge with four different corner radii.
  3. Use a two-value radius on a tile and notice the diagonal pairing.
  4. Build a pill button with border-radius: 999px.
  5. Make a 64×64 avatar with border-radius: 50% — then try 50% on a wide rectangle and compare.

Common mistakes

  • Setting a huge radius on an empty, borderless, colorless box and wondering why nothing “shows”
  • Using 50% on a wide rectangle and expecting a perfect circle (you get an ellipse)
  • Forgetting equal width and height when you want a circle
  • Thinking border-radius replaces border — you still need a border or a fill to see the curve clearly
  • Mixing up corner order (remember: clockwise from top-left for four values)

Summary

  • border-radius rounds the corners of the box
  • One value softens all corners; four values control each corner
  • Two values pair opposite corners diagonally
  • Large radii make pills; 50% on a square makes a circle
  • The curve clips border and background together
  • Practice the card, the pill, and the avatar until the shapes feel obvious

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial