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
Usage of border-right-width property in CSS
The border-right-width property controls the thickness of an element's right border. It only works when a border style is defined.
Syntax
border-right-width: value;
Values
| Value | Description |
|---|---|
thin |
Thin border (usually 1px) |
medium |
Medium border (usually 3px) |
thick |
Thick border (usually 5px) |
length |
Custom width (px, em, rem, etc.) |
Example with Different Widths
<!DOCTYPE html>
<html>
<head>
<style>
.box {
padding: 15px;
margin: 10px 0;
border-style: solid;
border-color: #007bff;
}
.thin { border-right-width: thin; }
.medium { border-right-width: medium; }
.thick { border-right-width: thick; }
.custom { border-right-width: 8px; }
</style>
</head>
<body>
<div class="box thin">Thin right border</div>
<div class="box medium">Medium right border</div>
<div class="box thick">Thick right border</div>
<div class="box custom">Custom 8px right border</div>
</body>
</html>
Important Notes
The border-right-width property requires a border-style to be visible. Without a style, the border won't appear regardless of width.
<!DOCTYPE html>
<html>
<head>
<style>
.invisible {
border-right-width: 10px;
/* No border-style - won't show */
}
.visible {
border-right-width: 10px;
border-right-style: solid;
border-right-color: red;
}
</style>
</head>
<body>
<p class="invisible">No visible border (missing style)</p>
<p class="visible">Visible red right border</p>
</body>
</html>
Conclusion
The border-right-width property sets the thickness of the right border. Remember to include border-style for the border to be visible.
Updated on: 2026-03-15T23:18:59+05:30
47 Views
Advertisements