CSS Rounded Borders: A Complete and Easy Guide
CSS rounded borders are one of the most popular styling features in web design. They make boxes, buttons, images, cards, and containers look smooth and modern. Instead of sharp corners, rounded borders give elements soft, curved edges.
In today’s web design, rounded corners are everywhere — from login forms to profile pictures and navigation menus. They help improve user experience and make layouts look cleaner and more attractive.
This detailed guide explains everything about CSS rounded borders in simple words. You will learn syntax, properties, values, examples, advanced techniques, practical use cases, and best practices.
What Are CSS Rounded Borders?
CSS rounded borders are created using the border-radius property. This property allows you to round the corners of any HTML element.
Without rounded borders, a box looks like this:
+--------+
| |
| |
+--------+
With rounded borders:
( )
( )
( )
Rounded borders soften the appearance of elements and improve visual appeal.
The border-radius Property
Basic Syntax
selector {
border-radius: value;
}
Example
div {
border: 2px solid black;
border-radius: 10px;
}
This makes all four corners rounded by 10 pixels.
How border-radius Works
The border-radius property defines the radius of the element’s corners.
- Small value → Slight curve
- Large value → More rounded
- Very large value → Circular shape
If the value is 50%, the element can become a circle (if width and height are equal).
Different Ways to Use Border Radius
1. Same Radius for All Corners
.box {
border-radius: 20px;
}
All four corners will have 20px rounded edges.
2. Different Radius for Each Corner
You can define each corner separately.
.box {
border-radius: 10px 20px 30px 40px;
}
Order:
- Top-left
- Top-right
- Bottom-right
- Bottom-left
3. Two Values
.box {
border-radius: 20px 40px;
}
- Top-left & bottom-right → 20px
- Top-right & bottom-left → 40px
4. Three Values
.box {
border-radius: 10px 20px 30px;
}
- Top-left → 10px
- Top-right & bottom-left → 20px
- Bottom-right → 30px
Individual Corner Properties
You can control each corner separately.
.box {
border-top-left-radius: 15px;
border-top-right-radius: 25px;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 45px;
}
This gives full control over each corner.
Creating Circular Elements
To create a circle:
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
}
Important: Width and height must be equal.
This is commonly used for:
- Profile pictures
- Avatar images
- Icon containers
Creating Pill-Shaped Buttons
.button {
padding: 10px 25px;
border-radius: 50px;
}
Large border-radius values create pill-style buttons.
These are common in:
- Modern UI design
- Mobile apps
- Call-to-action buttons
Using Percentage Values
You can use percentages instead of pixels.
.box {
border-radius: 20%;
}
Percentage values are relative to the element’s size.
Elliptical Corners
CSS also supports elliptical rounded corners using a slash.
.box {
border-radius: 50px / 20px;
}
This creates horizontal and vertical radii separately.
Format:
border-radius: horizontal-radius / vertical-radius;
Border Radius with Images
Rounded borders work beautifully with images.
img {
border-radius: 15px;
}
For circular images:
img {
border-radius: 50%;
}
Border Radius with Backgrounds
Rounded borders clip the background to the curved shape automatically.
Example:
.card {
background-color: lightblue;
border-radius: 12px;
}
The background follows the curved corners.
Border Radius and Overflow
Sometimes content may overflow outside rounded corners.
To fix this:
.container {
border-radius: 20px;
overflow: hidden;
}
This ensures content stays inside the rounded shape.
Practical Use Cases
1. Cards
Modern websites use cards for content blocks.
.card {
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
2. Buttons
Rounded buttons look friendlier.
.button {
border-radius: 8px;
}
3. Navigation Bars
.navbar {
border-radius: 0 0 15px 15px;
}
4. Forms and Input Fields
input {
border-radius: 6px;
}
Improves user interface design.
Browser Support
The border-radius property is supported by all modern browsers including:
- Chrome
- Firefox
- Edge
- Safari
It is safe to use in modern web development.
Common Mistakes to Avoid
1. Forgetting Equal Width & Height for Circles
If width ≠ height, you will get an oval instead of a circle.
2. Not Using Overflow Hidden
Content may break the rounded effect.
3. Using Extremely Large Values
Too large radius may distort design.
Best Practices
- Use consistent radius values across your website.
- Use small radius for professional design.
- Use larger radius for modern, friendly design.
- Combine with box-shadow for better depth.
- Test responsiveness on different screen sizes.
CSS Rounded Borders vs Old Design
Earlier websites had sharp edges. Modern design prefers:
- Soft UI
- Rounded shapes
- Clean appearance
- Minimalist look
Rounded borders improve readability and user engagement.
Advanced Example: Modern Card UI
.card {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
This creates a professional-looking content card.
Combining Border Radius with Other CSS Properties
With Box Shadow
.box {
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
With Gradients
.box {
background: linear-gradient(to right, blue, purple);
border-radius: 20px;
}
With Animations
.box {
transition: border-radius 0.3s ease;
}
.box:hover {
border-radius: 50px;
}
This creates smooth hover effects.
Real-World Example: Profile Card
.profile-card {
width: 300px;
padding: 20px;
border-radius: 15px;
background: #f9f9f9;
text-align: center;
}
.profile-card img {
width: 100px;
height: 100px;
border-radius: 50%;
}
Why Rounded Borders Matter in UX
Rounded corners:
- Feel safer and softer to users
- Improve readability
- Create visual hierarchy
- Make interfaces modern
Research shows users prefer rounded shapes over sharp edges because they look less aggressive.
Summary
CSS rounded borders are created using the border-radius property. They help transform simple rectangular elements into visually appealing shapes.
You can:
- Round all corners equally
- Customize each corner separately
- Create circles
- Create pill buttons
- Make elliptical shapes
- Combine with shadows and animations
Rounded borders are simple to implement but powerful in design impact. They are essential in modern web development.
FAQ Section
1. What is border-radius in CSS?
The border-radius property in CSS is used to create rounded corners on HTML elements. It can round all four corners or each corner individually.
2. How do you create a circle using CSS?
To create a circle, set equal width and height and apply border-radius: 50%;.
3. Can I set different rounded values for each corner?
Yes. You can define four different values in this order: top-left, top-right, bottom-right, bottom-left.
4. Does border-radius work in all browsers?
Yes. The border-radius property is supported by all modern browsers including Chrome, Firefox, Edge, and Safari.
5. What is the difference between pixel and percentage values in border-radius?
Pixel values create fixed rounded corners, while percentage values adjust based on the element’s size, making designs more responsive.