The border-right-width property in CSS is used to define the width (thickness) of the right border of an element. It controls how thick or thin the right border appears.
- It accepts values like thin, medium, thick, or specific units such as px, em, etc.
- The border is visible only if a border style is specified (e.g., solid, dashed).
- It is commonly used with border-right-style and border-right-color for complete border styling.
Syntax:
border-right-width: medium | thin | thick | length | initial | inherit; Property Values:
| Value | Description |
|---|---|
| medium | The default value sets a medium-sized right border. |
| thin | Sets a thin right border. |
| thick | Sets a thick right border. |
| length | Sets the thickness of the right border using specific length units (e.g., px, em, rem). |
| initial | Sets the right border width to its default value as defined by the browser. |
1. border-right-width: medium
The border-right-width: medium; property sets the right border of an element to a medium thickness by default.
Example: Here, we are using border-right-width: medium; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-width Property
</title>
<!--Driver Code Ends-->
<style>
h3 {
border: solid green;
border-right-width: medium;
width: 50%;
}
p {
border-style: dotted;
border-right-width: medium;
width: 70%;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:medium;</h2>
<!-- border-right-width property used here -->
<h3>GeeksForGeeks</h3>
<!-- border-right-width property used here -->
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
<!--Driver Code Ends-->
2. border-right-width: thin
The border-right-width: thin; property sets the right border of an element to a thin thickness.
Example: Here, we are using border-right-width: thin; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-width Property
</title>
<!--Driver Code Ends-->
<style>
h3 {
border: solid green;
border-right-width: thin;
width: 50%;
}
p {
border-style: dotted;
border-right-width: thin;
width: 70%;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:thin;</h2>
<!-- border-right-width property used here -->
<h3>GeeksForGeeks</h3>
<!-- border-right-width property used here -->
<p>
It is a computer science portal for geeks.
</p>
</center>>
</body>
</html>
<!--Driver Code Ends-->
3. border-right-width: thick
The border-right-width: thick; property sets the right border of an element to a thick thickness.
Example: Here, we are using the border-right-width: thick; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-width Property
</title>
<!--Driver Code Ends-->
<style>
h3 {
border: solid green;
border-right-width: thick;
width: 50%;
}
p {
border-style: dotted;
border-right-width: thick;
width: 70%;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:thick;</h2>
<!-- border-right-width property used here -->
<h3>GeeksForGeeks</h3>
<!-- border-right-width property used here -->
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
<!--Driver Code Ends-->
4. border-right-width: length
The length property in CSS specifies the width of the border using specific measurements like pixels (px), centimeters (cm), or other length units, customizing the right-border width accordingly.
Example: Here, we are using border-right-width: length; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-width Property
</title>
<!--Driver Code Ends-->
<style>
h3 {
border: solid green;
border-right-width: 10px;
width: 50%;
}
p {
border-style: dotted;
border-right-width: 5px;
width: 70%;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:length;</h2>
<!-- border-right-width property used here -->
<h3>GeeksForGeeks</h3>
<!-- border-right-width property used here -->
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
<!--Driver Code Ends-->
5. border-right-width: initial
The initial property in CSS sets a CSS property to its default value, specifically initializing the right-border width to its default setting.
Example: Here, we are using border-right-width: initial; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-right-width Property
</title>
<!--Driver Code Ends-->
<style>
h3 {
border: solid green;
border-right-width: initial;
width: 50%;
}
p {
border-style: dotted;
border-right-width: initial;
width: 70%;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:initial;</h2>
<!-- border-right-width property used here -->
<h3>GeeksForGeeks</h3>
<!-- border-right-width property used here -->
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
<!--Driver Code Ends-->