Border Radius: Rounded Corners Made Easy
If you’ve ever admired those smooth, rounded buttons or card corners on modern websites and wondered, “How do they do that?”, you’re in the right place.
In this beginner-friendly guide, you’ll learn how to use the CSS border-radius property to create rounded corners on boxes, buttons, and images. We’ll walk through simple, practical examples that you can copy, paste, and tweak—even if this is your very first time writing code.
What is border-radius?
border-radius is a CSS property. CSS (Cascading Style Sheets) is the language we use to style web pages—things like colors, fonts, and layouts.
border-radius lets you round the corners of any element on a web page. That could be a button, a card, an image, or even a whole section.
Think of it like this:
- No
border-radius= sharp, square corners - With
border-radius= soft, rounded corners
You control how round the corners are by giving border-radius a value.
How to follow along
To try the examples, you can:
- Open any text editor (Notepad, VS Code, etc.).
- Create a new file and save it as
border-radius.html. - Copy the example code into the file.
- Double-click the file to open it in your browser.
You can also use an online editor like CodePen or JSFiddle if you prefer.
Example 1: Your first rounded box
Let’s start with a simple box and give it slightly rounded corners.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Radius Example 1</title>
<style>
.box {
width: 200px; /* Box width */
height: 100px; /* Box height */
background-color: #4caf50; /* Green background */
color: white; /* White text */
padding: 20px; /* Space inside the box */
border-radius: 10px; /* Slightly rounded corners */
}
</style>
</head>
<body>
<div class="box">This box has rounded corners!</div>
</body>
</html>
What’s happening here?
- The
.boxclass styles our<div>element. border-radius: 10px;tells the browser to round each corner with a radius of 10 pixels.
Result: You’ll see a green rectangle with gently rounded corners and text inside.
Try it yourself
Change the 10px to 0px, 20px, 40px, or even 100px and reload the page.
Notice how the corners become more or less rounded as you change the value.
Understanding the values: pixels vs percentages
So far, we used 10px. The px stands for pixels, a basic unit of measurement on screens.
You can also use percentages, like 50%. This is especially useful when you want a shape to become a circle or a pill-shaped button.
border-radius: 10px;→ a small curveborder-radius: 30px;→ a big curveborder-radius: 50%;→ often gives circles or ovals
Example 2: Making a circle with border-radius
Let’s create a perfect circle using border-radius: 50%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Radius Example 2</title>
<style>
.circle {
width: 150px; /* Same width and height */
height: 150px; /* Important for a perfect circle */
background-color: #2196f3; /* Blue background */
border-radius: 50%; /* Makes the square a circle */
display: flex; /* Center content horizontally */
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
color: white; /* White text */
font-family: sans-serif; /* Simple font */
}
</style>
</head>
<body>
<div class="circle">Circle</div>
</body>
</html>
What’s happening here?
- We set the
widthandheightto the same value (150px). border-radius: 50%;rounds the corners so much that the square becomes a circle.
Result: You’ll see a blue circle with the word “Circle” centered inside.
Try it yourself
- Change
widthandheightto200pxfor a bigger circle. - Change
border-radiusto25%to see a more rounded square instead of a full circle.
Rounding specific corners only
You don’t have to round all four corners the same way. CSS lets you control each corner separately.
Here are the four properties:
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
You can use these to make fun shapes, like a speech bubble or a card with only top corners rounded.
Example 3: Rounding only the top corners
Let’s create a “card” with only the top corners rounded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Radius Example 3</title>
<style>
.card {
width: 250px; /* Card width */
padding: 20px; /* Inner spacing */
background-color: #ffffff; /* White background */
border: 1px solid #ccc; /* Light gray border */
border-top-left-radius: 15px; /* Round top-left corner */
border-top-right-radius: 15px; /* Round top-right corner */
border-bottom-left-radius: 0; /* Keep bottom corners sharp */
border-bottom-right-radius: 0;
font-family: sans-serif; /* Clean font */
}
</style>
</head>
<body style="background-color:#f5f5f5; padding:40px;">
<div class="card">
<h2>Rounded Top Card</h2>
<p>This card only has rounded corners on the top.</p>
</div>
</body>
</html>
What’s happening here?
- Only the top corners have a radius of
15px. - The bottom corners stay square with a radius of
0.
Result: You’ll see a white card with a light gray border and only the top corners rounded, like a header.
Try it yourself
- Swap the values: make the bottom corners
15pxand the top corners0. - Increase the radius to
30pxto exaggerate the rounded effect.
Using shorthand with border-radius
Writing four separate properties can be a bit long. CSS also lets you use a shorthand version:
border-radius: top-left top-right bottom-right bottom-left;
For example:
border-radius: 10px 20px 30px 40px;
This means:
- Top-left:
10px - Top-right:
20px - Bottom-right:
30px - Bottom-left:
40px
If you give only one value, like border-radius: 20px;, it applies the same radius to all four corners.
Example 4: A pill-shaped button
Let’s build a simple, modern button with fully rounded edges (often called a “pill” button).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Radius Example 4</title>
<style>
.btn {
padding: 10px 25px; /* Vertical and horizontal padding */
background-color: #ff5722; /* Orange background */
color: white; /* White text */
border: none; /* Remove default border */
border-radius: 999px; /* Very large radius for pill shape */
font-size: 16px; /* Text size */
font-family: sans-serif; /* Simple font */
cursor: pointer; /* Pointer cursor on hover */
}
.btn:hover {
background-color: #e64a19; /* Slightly darker on hover */
}
</style>
</head>
<body>
<button class="btn">Click Me</button>
</body>
</html>
What’s happening here?
border-radius: 999px;is just a very large number to ensure the ends become fully rounded.- Because the button is wider than it is tall, the result is a nice pill shape.
Result: You’ll see a smooth, rounded orange button that darkens slightly when you hover your mouse over it.
Try it yourself
- Change
border-radiusto5px,20px, and back to999pxto see the difference. - Adjust the padding to make the button taller or wider.
Bonus: Rounded images
You can also apply border-radius to images. This is a great way to create circular profile pictures.
Basic idea:
img.profile {
width: 120px;
height: 120px;
border-radius: 50%; /* Turn the image into a circle */
object-fit: cover; /* Crop nicely if the image isn't square */
}
If you add that style to an <img> tag with class="profile", you’ll get a circular image.
Common mistakes (and how to avoid them)
Different width and height with 50%
If you useborder-radius: 50%on a rectangle, you’ll get an oval, not a perfect circle. For circles, keep width and height equal.Forgetting units
border-radius: 10;(withoutpxor%) is invalid. Always include units likepxor%.Expecting circles without enough rounding
Small values (like5px) only slightly round the corners. Use larger values or percentages for stronger curves.
Quick recap
You’ve just learned how to:
- Use
border-radiusto create rounded corners on boxes and buttons. - Make circles and pill-shaped buttons with
border-radius: 50%and large pixel values. - Round individual corners with properties like
border-top-left-radius. - Use shorthand to set all four corners at once.
If this is your first step into CSS, well done—rounded corners may seem small, but they instantly make your designs look more modern and professional.
What’s next? Try combining border-radius with other CSS properties like box-shadow, background-color, and hover effects to build attractive cards and buttons. Keep experimenting, keep tweaking values, and celebrate each small improvement you see in your page—every experiment is a step forward in your coding journey.
