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.
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" > w3wiki </ h1 > < h2 >border-right-width:initial;</ h2 > <!-- border-right-width property used here --> < h3 >w3wiki</ h3 > <!-- border-right-width property used here --> < p > It is a computer science portal for Beginner. </ 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" > w3wiki </ h1 > < h2 >border-right-width:initial;</ h2 > <!-- border-right-width property used here --> < h3 >w3wiki</ h3 > <!-- border-right-width property used here --> < p > It is a computer science portal for Beginner. </ 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" > w3wiki </ h1 > < h2 >border-right-width:initial;</ h2 > <!-- border-right-width property used here --> < h3 >w3wiki</ h3 > <!-- border-right-width property used here --> < p > It is a computer science portal for Beginner. </ 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" > w3wiki </ h1 > < h2 >border-right-width:initial;</ h2 > <!-- border-right-width property used here --> < h3 >w3wiki</ h3 > <!-- border-right-width property used here --> < p > It is a computer science portal for Beginner. </ 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" > w3wiki </ h1 > < h2 >border-right-width:initial;</ h2 > <!-- border-right-width property used here --> < h3 >w3wiki</ h3 > <!-- border-right-width property used here --> < p > It is a computer science portal for Beginner. </ 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
Contact Us