CSS Rounded Corners

Before jumping in, make sure you understand these basic ideas. If any of them are new to you, read the short explanation provided before continuing.

What is an HTML element?

An HTML element is anything you put on a webpage · a box of text (<div>), a paragraph (<p>), an image (<img>), a button (<button>), and so on. Every element takes up a rectangular space on the page.

What is CSS?

CSS stands for Cascading Style Sheets. It is the language you use to control how HTML elements look · their colours, sizes, fonts, spacing, and shape.

What is a CSS property?

A CSS property is an instruction you give to the browser. For example:

color: red;

This tells the browser: "Make the text colour red."

What is a CSS value?

A value is the specific setting you give to a property. In color: red, the value is red. Values can be colours, numbers, percentages, keywords, and more.

What is a pixel (px)?

A pixel is a tiny unit of measurement on screens. 25px means "25 pixels." The more pixels, the bigger the size. A typical laptop screen is about 1920 pixels wide.

What is border-radius?

Imagine taking a plain rectangular piece of cardboard. The corners are sharp 90-degree points. Now imagine using scissors to clip each corner into a smooth curve. That is exactly what border-radius does in CSS · it clips the corners of an element's box to make them curved.

border-radius is a CSS property that defines the radius of the curves at the corners of an element.

📐 Analogy: Think of a circle. The "radius" of a circle is the distance from its centre to its edge. When you set border-radius: 25px, you are telling the browser to place an imaginary circle of radius 25px at each corner, and curve the corner to match that circle.

Why does border-radius exist?

Before CSS3 (an upgrade to CSS released around 2011), creating rounded corners on a webpage required very complex tricks · developers had to use separate corner images, slice pictures, or write JavaScript. This was slow, hard to maintain, and fragile.

border-radius was introduced in CSS3 to solve this problem cleanly. With just one line of code, any element can have rounded corners.

What elements can use border-radius?

border-radius works on any element that has one of the following:

• A background-color (a filled background)
• A border (a visible edge/stroke)
• A background-image (a picture as the background)

💡 Think about it: If an element has no visible background or border, border-radius still works but you may not be able to see the effect, because there is nothing being clipped visually.

How does it work internally?

When you write:

border-radius: 25px;

The browser draws an arc (a curved segment from a circle of radius 25px) at all four corners of the element's box. The greater the value, the more dramatic the curve.

Syntax

selector {
  border-radius: value;
}

The value can be written as:

• Pixels · 10px, 25px, 50px
• Percentage · 10%, 25%, 50%

Simple Example · One Value, All Four Corners

When you give border-radius a single value, it applies the same curve to all four corners.

<!-- HTML -->
<div id="box1">Hello!</div>

/* CSS */
#box1 {
  border-radius: 25px;
  background-color: #73AD21;
  width: 200px;
  height: 100px;
  padding: 20px;
}

What this does:

• border-radius: 25px · clips all four corners with a 25px curve
• background-color: #73AD21 · gives the box a green background so you can see the shape
• width and height · define the box size
• padding · adds space between the text and the edge

Expected visual output:

╭──────────────────╮
│                  │
│      Hello!      │
│                  │
╰──────────────────╯

A green box with smooth rounded corners.

The Property Works on Any Background Type

You do not need a solid colour background. border-radius also works on elements with:

A border only (no fill):

<div id="box2">Rounded border!</div>

#box2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  width: 200px;
  height: 100px;
  padding: 20px;
}

Expected visual output: A box with NO fill colour, only a visible green curved border/stroke around it.

A background image:

<div id="box3">Image box!</div>

#box3 {
  border-radius: 25px;
  background-image: url("paper.jpg");
  width: 200px;
  height: 100px;
  padding: 20px;
}

Expected visual output: The image inside the box is clipped so the corners are rounded · the image itself appears to have rounded corners.

💡 Key insight: border-radius clips the visible boundary of the element. Whatever is inside (colour, image, text) gets clipped at the rounded corners.

This is where border-radius becomes really powerful. You can round each corner by a different amount, which lets you create unique, custom shapes.

The Four Corner Properties

Each corner of an element has its own property name:

🗺️ Corner map:

code❐ Copy

top-left ──────────── top-right
│                      │
│         BOX           │
│                      │
bottom-left ──────── bottom-right

Example · Different Radius Per Corner

<div id="custom">Unique shape!</div>

#custom {
  border-top-left-radius: 50px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 10px;
  background-color: #3498DB;
  width: 200px;
  height: 100px;
  padding: 20px;
  color: white;
}

Line-by-line breakdown:

• border-top-left-radius: 50px → Top-left corner gets a big, dramatic curve (50px)
• border-top-right-radius: 10px → Top-right corner gets a small, subtle curve (10px)
• border-bottom-right-radius: 50px → Bottom-right gets the same big curve
• border-bottom-left-radius: 10px → Bottom-left gets the small curve
• background-color: #3498DB → Blue background
• color: white → White text so it's readable on blue

Expected visual output:

╭────────────────────╮
│                    │
│   Unique shape!    │
│                    │
╰────────────────────╯
(left sides heavily curved, right sides slightly curved)

🤔 Think about it: What would happen if you set border-top-left-radius: 0px? The top-left corner would be a sharp 90-degree point while the others remain rounded.

Writing four separate properties every time would be tedious. CSS provides a shorthand · a way to write all four values in one line.

Shorthand with 4 Values

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

The values go clockwise starting from the top-left corner. Think of a clock: start at 10 o'clock (top-left), go to 2 o'clock (top-right), then 4 o'clock (bottom-right), then 8 o'clock (bottom-left).

/* These two are exactly the same: */

/* Long version */
border-top-left-radius: 15px;
border-top-right-radius: 50px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 5px;

/* Shorthand version */
border-radius: 15px 50px 30px 5px;

🧠 Memory trick: Top-Left → Top-Right → Bottom-Right → Bottom-Left. You can remember this as "TL → TR → BR → BL" going clockwise.

Full Example with 4-Value Shorthand

<div id="shorthand-box">Shorthand!</div>

#shorthand-box {
  border-radius: 15px 50px 30px 5px;
  background-color: #E74C3C;
  width: 200px;
  height: 100px;
  padding: 15px;
  color: white;
}

Expected visual output: A red box where:

• Top-left: small curve (15px)
• Top-right: large curve (50px)
• Bottom-right: medium curve (30px)
• Bottom-left: very small curve (5px)

Shorthand with 3 Values

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

Example:

border-radius: 10px 25px 40px;
/* 
  top-left        = 10px
  top-right       = 25px (also applies to bottom-left)
  bottom-right    = 40px
  bottom-left     = 25px (same as top-right)
*/

Shorthand with 2 Values

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

Example:

border-radius: 10px 40px;
/*
  top-left = bottom-right = 10px
  top-right = bottom-left = 40px
*/

This creates a shape that looks like it's tilted · the diagonal corners match.

Shorthand with 1 Value

border-radius: 25px;
/* All four corners = 25px */

This is the most common usage. All four corners get the same curve.

One of the most exciting things about border-radius is that you can use it to create circles and "pill" shapes · without any images!

How to Make a Perfect Circle

To make a circle, you need:

1. An element where width equals height (a square)
2. border-radius: 50%

Using 50% means the radius equals half of the element's size · which turns a square into a perfect circle.

<div id="circle">Circle!</div>

#circle {
  border-radius: 50%;
  background-color: #9B59B6;
  width: 150px;
  height: 150px;
  color: white;
  text-align: center;
  line-height: 150px; /* vertically centers text */
}

Line-by-line:

• border-radius: 50% → Rounds every corner by 50% of the element's size · creating a full circle
• width: 150px; height: 150px → Must be equal to make a circle (not oval)
• line-height: 150px → A trick to vertically center text by matching line height to box height

Expected visual output:

   ╭──────╮
  ╱        ╲
 │  Circle!  │
  ╲        ╱
   ╰──────╯

A perfect purple circle.

🌟 Real-world use: Profile pictures on social media (Twitter, LinkedIn, Facebook) are squares in the code, made to look circular using border-radius: 50%.

How to Make a Pill Shape (Ellipse / Capsule)

A pill shape (also called a capsule) is a rectangle with fully rounded left and right sides. You often see this on buttons.

<div id="pill">I am a pill!</div>

#pill {
  border-radius: 50px;  /* Large enough to fully round short sides */
  background-color: #1ABC9C;
  width: 250px;
  height: 60px;
  color: white;
  text-align: center;
  line-height: 60px;
  padding: 0 20px;
}

Expected visual output:

╭─────────────────────────╮
│       I am a pill!       │
╰─────────────────────────╯

The trick: the height is 60px and the border-radius is 50px · since the radius is close to or greater than half the height, the short ends become fully curved into semicircles.

💡 Tip: You can also use border-radius: 999px for a guaranteed pill shape at any size, because an extremely large radius will always create full semicircle ends on shorter sides.

Creating an Ellipse (Oval)

If you use border-radius: 50% on a non-square element (where width ≠ height), you get an oval/ellipse.

<div id="ellipse">Oval</div>

#ellipse {
  border-radius: 50%;
  background-color: #E67E22;
  width: 300px;
  height: 100px;
  color: white;
  text-align: center;
  line-height: 100px;
}

Expected visual output:

   ╭─────────────────────╮
  ╱                        ╲
 │          Oval             │
  ╲                        ╱
   ╰─────────────────────╯

A wide, flat orange oval.

🤔 Think about it: What happens to the shape if you change height from 100px to 200px while keeping width: 300px? The oval becomes more circular as the aspect ratio approaches 1:1.

border-radius accepts both px (pixel) values and % (percentage) values. Understanding the difference is important.

Pixel values (px)

Fixed and absolute. border-radius: 20px always creates a curve with a 20px radius, no matter how big or small the element is.

/* A small box and a large box both get a 20px curve */
.small-box { width: 50px; height: 50px; border-radius: 20px; }
.large-box { width: 500px; height: 500px; border-radius: 20px; }

On the small box, 20px is a large fraction of its size · it will look very round. On the large box, 20px is a tiny fraction · it will look almost square with just slightly clipped corners.

Percentage values (%)

Relative to the element's size. border-radius: 50% always creates a curve equal to 50% of the element's dimensions · so it scales perfectly with the element.

/* Both boxes become perfect circles */
.small-box { width: 50px; height: 50px; border-radius: 50%; }
.large-box { width: 500px; height: 500px; border-radius: 50%; }

📏 Rule of thumb:

• Use % when you want the rounding to scale with the element (e.g., circles, responsive designs)
• Use px when you want the rounding to stay a fixed size regardless of element dimensions (e.g., button corners, card corners)

Here is a complete reference for everything you can do with border-radius:

These challenges directly reflect the types of exercises from the W3Schools CSS Rounded Corners Code Challenge page. Try each one, then check the solution.

Challenge 1 · Add Rounded Corners

Task: Give the <div> below a border-radius of 25px.

<div style="background-color:#73AD21; width:200px; height:100px; padding:20px;">
  I am a div element.
</div>

Your job: Add one CSS property to this div.

Solution:

<div style="background-color:#73AD21; width:200px; height:100px; padding:20px; border-radius:25px;">
  I am a div element.
</div>

Expected output: A green box with all four corners rounded by 25 pixels.

Challenge 2 · Only Top-Left Corner

Task: Make only the top-left corner of a div rounded with a value of 25px. All other corners must stay sharp.

Solution:

div {
  border-top-left-radius: 25px;
  background-color: #73AD21;
  width: 200px;
  height: 100px;
  padding: 20px;
}

Expected output:

╭────────────────────
│
│   I am a div.
│
└────────────────────

Only the top-left corner is rounded.

Challenge 3 · Make an Ellipse

Task: Use border-radius to turn the div below into an ellipse (oval shape).

<div style="background-color:#73AD21; width:300px; height:100px;">
</div>

Solution:

<div style="background-color:#73AD21; width:300px; height:100px; border-radius:50%;">
</div>

Expected output: A wide green oval shape.

🔑 Key: 50% applied to a non-square element always creates an oval. The wider the element, the more "stretched" the oval.

Challenge 4 · Shorthand 4 Values

Task: Use the border-radius shorthand to set:

• Top-left: 15px
• Top-right: 50px
• Bottom-right: 30px
• Bottom-left: 5px

Solution:

div {
  border-radius: 15px 50px 30px 5px;
  background-color: #73AD21;
  width: 200px;
  height: 100px;
  padding: 20px;
}

Expected output: A green box with four distinctly different corner curves. Top-right has the most dramatic curve (50px), bottom-left has the subtlest (5px).

Mistake 1 · Forgetting to set equal width and height for circles

❌ Wrong:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 100px; /* not equal to width! */
}

Result: An oval, not a circle. CSS cannot create a circle if the element is not square.

✅ Correct:

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px; /* equal to width */
}

Mistake 2 · Wrong shorthand order

❌ Wrong (assuming clockwise but starting wrong):

/* Intended: top-right=50px, others=10px */
border-radius: 50px 10px 10px 10px; /* This makes TOP-LEFT=50px */

✅ Correct:

/* Shorthand order: top-left, top-right, bottom-right, bottom-left */
border-radius: 10px 50px 10px 10px; /* NOW top-right=50px */

🔑 Reminder: The order is always clockwise starting from top-left.

Mistake 3 · Using border-radius without a visible background or border

❌ Wrong:

p {
  border-radius: 20px;
  /* No background-color, no border — nothing to round! */
}

Result: No visible change because there is nothing to clip.

✅ Correct:

p {
  border-radius: 20px;
  background-color: #ECF0F1; /* Now there's something to round */
  padding: 10px;
}

Mistake 4 · Typos in the property name

❌ Common typos:

border-radius-top: 10px;    /* WRONG - property doesn't exist */
top-left-radius: 10px;      /* WRONG - incorrect syntax */

✅ Correct:

border-top-left-radius: 10px;   /* CORRECT - always "border-" first */

Mistake 5 · Using percentage on a non-square for a circle

❌ Wrong (expecting a circle):

.avatar {
  border-radius: 50%;
  width: 200px;
  height: 80px; /* Different from width */
}

Result: An oval/ellipse, not a circle.

✅ Correct:

.avatar {
  border-radius: 50%;
  width: 100px;
  height: 100px; /* Width = Height = Square → Circle */
}

border-radius is one of the most frequently used CSS properties in professional web development:

Profile pictures: Social platforms use border-radius: 50% to turn square profile images into circles.

Buttons: Most modern UI buttons use border-radius: 4px to border-radius: 999px for a friendly, approachable look. Google's Material Design recommends border-radius: 4px for standard buttons.

Cards and panels: Dashboard panels, notification cards, and content cards typically use border-radius: 8px to border-radius: 16px for a modern, clean feel.

Badges and tags: Pill-shaped badges showing categories, statuses, or labels use border-radius: 999px for the capsule shape.

Modal dialogs: Popup windows and modals often use border-radius: 12px on the container for a friendly appearance.

Input fields: Form inputs sometimes use border-radius: 4px or border-radius: 8px for a softer look.

Avatars in chat apps: WhatsApp, Slack, and Teams use circular avatars created with border-radius: 50%.