The border-right-width property in CSS is used to set the width of right-border of an element. It is mandatory to declare the border-style or the border-right-style property before the border-right-width property.
Syntax:
border-right-width: medium|thin|thick|length|initial|inherit;
Property Values:
- medium: It is the default value. It is used to specify a medium size of right-border.
- thin: This property is used to set the width of right border as thin.
- thick: This property is used to specify a thick right-border of an element.
- length: This property is used to set the thickness of the right-border.
- initial: It is used to set border-right-width property to its default value.
Example: In this example, we are using border-right-width: medium; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid green;
border-right-width: medium;
width: 50%;
}
p {
border-style: dotted;
border-right-width: medium;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:initial;</h2>
<h3>GeeksForGeeks</h3>
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Example: In this example, we are using border-right-width: thin; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid green;
border-right-width: thin;
width: 50%;
}
p {
border-style: dotted;
border-right-width: thin;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:initial;</h2>
<h3>GeeksForGeeks</h3>
<p>
It is a computer science portal for geeks.
</p>
</center>>
</body>
</html>
|
Output:
Example: In this example, we are using the border-right-width: thick; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid green;
border-right-width: thick;
width: 50%;
}
p {
border-style: dotted;
border-right-width: thick;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:initial;</h2>
<h3>GeeksForGeeks</h3>
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Example: In this example, we are using border-right-width: length; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid green;
border-right-width: 10px;
width: 50%;
}
p {
border-style: dotted;
border-right-width: 5px;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:initial;</h2>
<h3>GeeksForGeeks</h3>
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Example: In this example, we are using border-right-width: initial; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-right-width Property
</title>
<style>
h3 {
border: solid green;
border-right-width: initial;
width: 50%;
}
p {
border-style: dotted;
border-right-width: initial;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksForGeeks
</h1>
<h2>border-right-width:initial;</h2>
<h3>GeeksForGeeks</h3>
<p>
It is a computer science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by border-right-width property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0