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-bottom-right-radius property
The CSS border-bottom-right-radius property is used to set the radius of the bottom-right corner of an element. This property allows you to create rounded corners specifically for the bottom-right corner, independent of other corners.
Syntax
selector {
border-bottom-right-radius: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Specifies the radius in px, em, rem, etc. |
% |
Specifies the radius as a percentage of the element's dimensions |
initial |
Sets the property to its default value |
inherit |
Inherits the property from the parent element |
Example
The following example demonstrates how to set a specific radius for the bottom-right corner using the border-bottom-right-radius property −
<!DOCTYPE html>
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-bottom-right-radius: 45px;
background: orange;
padding: 20px;
width: 200px;
height: 150px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<p id="rcorner">Rounded corners!</p>
</body>
</html>
An orange box with white text "Rounded corners!" appears. The box has 25px radius on three corners, but the bottom-right corner has a more pronounced 45px radius, creating an asymmetrical rounded effect.
Conclusion
The border-bottom-right-radius property provides precise control over individual corner rounding. It's particularly useful when you need asymmetrical designs or want to override a general border-radius value for a specific corner.
Updated on: 2026-03-15T11:42:27+05:30
78 Views
Advertisements