Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add rounded corner to an element using CSS?
Rounded corners add a soft and smooth look to a website and make it more visually appealing. In CSS, the border-radius property is used to create rounded corners on HTML elements such as divs, buttons, forms, or images.
Syntax
selector {
border-radius: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines radius in px, em, rem, etc. |
% |
Defines radius as percentage (50% creates circle) |
1-4 values |
Different values for each corner (top-left, top-right, bottom-right, bottom-left) |
Individual Corner Properties
You can target specific corners using these properties
-
border-top-left-radiusTop left corner -
border-top-right-radiusTop right corner -
border-bottom-right-radiusBottom right corner -
border-bottom-left-radiusBottom left corner
Example: Uniform Rounded Corners
The following example applies a 25px border radius to all four corners
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.box1 {
border-radius: 25px;
background: #6ffc03;
padding: 20px;
width: 150px;
height: 150px;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
.box2 {
border-radius: 25px;
border: 2px solid #8AC007;
background: #46637a;
color: white;
padding: 20px;
width: 150px;
height: 150px;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="box1">Rounded corners!</div>
<div class="box2">Rounded corners!</div>
</body>
</html>
Two boxes with rounded corners appear: a green box and a blue-gray box with border, both displaying "Rounded corners!" text.
Example: Individual Corner Styling
This example demonstrates different corner radius values
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.box1 {
border-bottom-left-radius: 50px;
background: #6ffc03;
padding: 20px;
width: 150px;
height: 150px;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
.box2 {
border-top-right-radius: 50px;
border: 2px solid #8AC007;
background: #46637a;
color: white;
padding: 20px;
width: 150px;
height: 150px;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="box1">Bottom-left rounded!</div>
<div class="box2">Top-right rounded!</div>
</body>
</html>
Two boxes appear: one with only the bottom-left corner rounded, and another with only the top-right corner rounded.
Example: Creating Circular Shape
Use border-radius: 50% to create perfect circles
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.circle {
border-radius: 50%;
background: #ff6b6b;
color: white;
width: 150px;
height: 150px;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="circle">Perfect Circle!</div>
</body>
</html>
A perfect red circle with white text "Perfect Circle!" appears on the page.
Conclusion
The border-radius property is essential for modern web design, allowing you to create everything from subtle rounded corners to perfect circles. Use individual corner properties for asymmetric designs and percentage values for responsive circular elements.
Updated on: 2026-03-15T16:16:15+05:30
2K+ Views
Advertisements