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
CSS border-radius property
The CSS border-radius property is used to create rounded corners on elements. This property allows you to specify the radius of the corners, making elements appear with smooth, curved edges instead of sharp rectangular corners.
Syntax
selector {
border-radius: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines the radius in px, em, rem, etc. |
% |
Defines the radius as a percentage of the element's dimensions |
initial |
Sets the property to its default value (0) |
inherit |
Inherits the value from the parent element |
Example: Basic Rounded Corners
The following example demonstrates how to create rounded corners using the border-radius property −
<!DOCTYPE html>
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>
</head>
<body>
<div id="rcorner">Rounded corners!</div>
</body>
</html>
A green rectangular box with 25px rounded corners appears on the page, containing centered white text "Rounded corners!".
Example: Different Corner Radii
You can also specify different radii for each corner by providing multiple values −
<!DOCTYPE html>
<html>
<head>
<style>
.different-corners {
border-radius: 10px 30px 15px 40px;
background: #FF6B6B;
padding: 20px;
width: 200px;
height: 100px;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="different-corners">Different Corners</div>
</body>
</html>
A red box with different radius values for each corner (top-left: 10px, top-right: 30px, bottom-right: 15px, bottom-left: 40px) appears with centered white text.
Conclusion
The border-radius property is essential for modern web design, allowing you to create smooth, rounded corners on any element. Use a single value for uniform rounding or multiple values to customize each corner individually.
Updated on: 2026-03-15T11:41:46+05:30
184 Views
Advertisements