LESSON 5.2

CSS Border Radius

Round your corners for a modern, polished look

Learn how the border-radius property lets you soften the corners of any element, from subtly rounded buttons to perfect circles.

💡 The Concept

CSS border radius is what gives elements rounded corners — one of the most commonly used visual effects in modern web design. The border-radius property rounds the corners of an element’s border. Lower values give subtle rounding; higher values create more dramatic curves. Many designers choose one border-radius value and apply it consistently across their site for a uniform look.

Examples of different border-radius values from subtle to fully rounded
Border-radius values range from slightly rounded corners to a full circle.

Basic Usage

img {
   border: 3px solid #333;
   border-radius: 10px;
}

Shorthand: Different Values Per Corner

Like padding, border-radius has a shorthand for setting each corner individually. The values go clockwise from the top-left: top-left, top-right, bottom-right, bottom-left.

button {
   border-radius: 15px 30px 100px 5px;
}
Examples of border-radius shorthand with different values on each corner
Each corner can have a different radius using the shorthand.

Making a Circle

Setting border-radius: 50% on a square element turns it into a perfect circle. This is widely used for profile photos and avatars:

img {
   border: 3px solid #333;
   border-radius: 50%;
   width: 200px;
   height: 200px;
}

🎬 Video Demonstration

In the video below I demonstrate how to set a border radius. If you have a square element you can make it round with border-radius: 50%.

Exercise: Try It Yourself

Step 1. Open JSFiddle and paste this HTML into the HTML panel:

<h1>Border Play</h1>
<img src="https://webdevstudents.com/wp-content/uploads/2025/09/guinea-pig.png" alt="A cute guinea pig" width="100" height="100">

Step 2. In the CSS panel, add a border-radius to the image. If you need help choosing values, use the Border Generator to experiment and copy the CSS.

Step 3. Make the image a circle with border-radius: 50%.

Step 4. Use the shorthand to set a different radius on each corner.

JSFiddle demonstrating border-radius including 50% for a circle

📌 Tools of the Trade: The Border Generator lets you experiment with border-radius values visually and copy the CSS. Bookmark the Tools of the Trade page for quick access to all course tools.

Frequently Asked Questions

Does border-radius work without a visible border?

Yes. border-radius rounds the corners of the element itself — its background, outline, and any border it has. You don’t need a border property at all. Many designers use border-radius on images and cards with no border.

What is the difference between px and % for border-radius?

Pixel values give a fixed curve size no matter how large or small the element is. Percentage values are relative to the element’s dimensions — which is why border-radius: 50% on a square always creates a perfect circle.

Why doesn’t border-radius: 50% always make a circle?

It only creates a circle when the element is square (equal width and height). On a rectangle, border-radius: 50% creates an ellipse instead. Set explicit equal width and height values to guarantee a circle.

Can I round just one corner?

Yes. Use the individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Or use the four-value shorthand to set each corner in one line.

What order do the shorthand values go in?

Clockwise starting from the top-left corner: top-left, top-right, bottom-right, bottom-left. This is the same order used by padding and margin shorthand.

Can I use border-radius on buttons?

Absolutely — it’s one of the most common uses. A small value like 4px gives a subtle rounded look; a large value like 50px on a short button creates a “pill” shape. Many design systems pick one border-radius value and apply it to all buttons for a consistent style.

Do I need overflow: hidden with border-radius?

Sometimes. If you apply border-radius to a container and the content inside (like an image) spills out past the rounded corners, add overflow: hidden to the container. This clips the content to the rounded shape.

How does the math behind border-radius work?

border-radius works by placing an imaginary circle in each corner — the value you set is the radius of that circle. The corner of your element follows the curve of that circle’s edge. A small value like 4px places a tiny circle there (barely noticeable rounding); a larger value places a bigger circle (more dramatic curve). With border-radius: 50% on a square element, the circle in each corner is exactly half the element’s size, so all four arcs meet perfectly in the middle and form a complete circle. On a rectangle, the width and height are different, so 50% gives you an ellipse instead.

★ Key Takeaways

Rounded corners are a staple of modern web design. This lesson showed you how to use the border-radius property to create rounded shapes, pill buttons, and even perfect circles. Next, you will learn how to use CSS gradients to create smooth color transitions for backgrounds and design elements.

Next Lesson: CSS Gradients

← Back to Borders, Shadows, and More Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons