CSS border-right-width Property
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.
Default Value:
- medium
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.
Syntax:
border-right-width: medium;
Example:
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> <!-- 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> |
Output:
thin: This property is used to set the width of right border as thin.
Syntax:
border-right-width: thin;
Example:
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> <!-- 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> |
Output:
thick: This property is used to specify a thick right-border of an element.
Syntax:
border-right-width: thick;
Example:
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> <!-- 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> |
Output:
length: This property is used to set the thickness of the right-border.
Syntax:
border-right-width: length;
Example:
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> <!-- 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> |
Output:
initial: It is used to set border-right-width property to its default value.
Syntax:
border-right-width: initial;
Example:
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> <!-- 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> |
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
Please Login to comment...