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
Add special colored corner to body or text in CSS
CSS rounded corners are used to add special colored corners to body or text by using the border-radius property. This property allows you to create smooth, curved corners instead of the default sharp rectangular edges.
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 |
inherit |
Inherits the property from its parent element |
Example: Basic Rounded Corners
The following example creates a colored box with rounded corners −
<!DOCTYPE html>
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
color: white;
text-align: center;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="rcorner">Rounded corners!</div>
</body>
</html>
A green rectangular box with 25px rounded corners, containing centered white text "Rounded corners!" appears on the page.
Example: Different Corner Radii
You can specify different radii for each corner using four values −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-corners {
border-radius: 50px 20px 10px 5px;
background: #FF6B6B;
padding: 20px;
width: 200px;
height: 100px;
color: white;
text-align: center;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="custom-corners">Different corners!</div>
</body>
</html>
A red box with varying corner radii (top-left: 50px, top-right: 20px, bottom-right: 10px, bottom-left: 5px) and centered white text appears on the page.
Conclusion
The border-radius property is essential for creating modern web designs with smooth, rounded corners. You can use a single value for uniform corners or specify individual values for each corner to create unique visual effects.
Updated on: 2026-03-15T11:41:31+05:30
498 Views
Advertisements