border-right-width 4w641a
The border-right-width property is used to set the width of the right border of an element. 5v6hs
The width of the border can be explicitly set using a <length>
value, or by using one of three border width keywords: thin
, medium
, and thick
.
Official Syntax 52n3v
- Syntax:
border-right-width: <length> | thin | medium | thick
- Initial: medium
- Applies To: all elements
- Animatable: yes
Notes 3g6b1p
Note that the initial width is medium
, but the initial border style of an element is none
and therefore the used width is 0.
Values 6u6u2p
- <length>
- The width of the border is set to the specified length. Negative values are not allowed.
- thin
- Implementation-specfic. See note below and the live demo for examples.
- medium
- Implementation-specfic. See note below and the live demo for examples.
- thick
- Implementation-specfic. See note below and the live demo for examples.
Notes 3g6b1p
The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific, but the values are constant throughout a document and thin ? medium ? thick. A browser could, for example, make the thickness depend on the medium
font size: one choice might be 1px (for thin
), 3px (for medium
) & 5px (for thick
) when the medium
font size is 17px or less.
The border-right-width
property can also inherit the value of the element’s parent’s right border width using the keyword inherit
.
Examples 2w2wp
The following are all valid border-right-width
values set on an element. The element’s border style and border color are also set using the border-right-color
respectively.
.element { border-right-style: dotted; border-right-color: red; border-right-width: 10px; /* or */ border-right-width: thin; /* or */ border-right-width: 1em; }
Browser 3n3564
The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.