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-top-right-radius property
The CSS border-top-right-radius property is used to set the radius of the top-right corner of an element. This property allows you to create rounded corners specifically for the top-right corner, giving you precise control over individual corner styling.
Syntax
selector {
border-top-right-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 Top-Right Corner Radius
The following example demonstrates how to apply a specific radius to only the top-right corner −
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-box {
border-top-right-radius: 45px;
background: orange;
padding: 20px;
width: 200px;
height: 150px;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="rounded-box">Top-Right Rounded!</div>
</body>
</html>
An orange box appears with only the top-right corner rounded (45px radius), while the other three corners remain sharp. The text "Top-Right Rounded!" is centered inside.
Example: Combining with Other Border Radius Properties
You can combine border-top-right-radius with other border radius properties to create unique corner effects −
<!DOCTYPE html>
<html>
<head>
<style>
.mixed-corners {
border-top-left-radius: 20px;
border-top-right-radius: 50px;
border-bottom-left-radius: 10px;
background: #4CAF50;
padding: 25px;
width: 250px;
height: 100px;
color: white;
text-align: center;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="mixed-corners">Mixed Corner Radiuses</div>
</body>
</html>
A green box with different radius values for each corner: top-left (20px), top-right (50px), bottom-left (10px), and bottom-right remains square.
Conclusion
The border-top-right-radius property provides precise control over individual corner styling. Use it alone for asymmetric designs or combine it with other border radius properties to create unique visual effects.
Updated on: 2026-03-15T11:42:16+05:30
94 Views
Advertisements