border-right-width
{{CSSRef}}
The border-right-width
CSS property sets the width of the right border of an element.
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
Syntax
/* Keyword values */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
/* <length> values */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;
/* Global keywords */
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: revert-layer;
border-right-width: unset;
Values
-
<line-width>
-
: Defines the width of the border, either as an explicit nonnegative
{{cssxref("<length>")}}
or a keyword. If it’s a keyword, it must be one of the following values:thin
medium
thick
-
[!NOTE] Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern
thin ≤ medium ≤ thick
, and the values are constant within a single document.
Formal definition
{{CSSInfo}}
Formal syntax
{{csssyntax}}
Examples
Comparing border widths
HTML
<div>Element 1</div>
<div>Element 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-right-width: thick;
}
div:nth-child(2) {
border-right-width: 2em;
}
Result
{{EmbedLiveSample('Comparing_border_widths', '100%')}}
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}
See also
- The other border-width-related CSS properties:
{{Cssxref("border-bottom-width")}}
,{{Cssxref("border-left-width")}}
,{{Cssxref("border-top-width")}}
, and{{Cssxref("border-width")}}
. - The other border-right-related CSS properties:
{{Cssxref("border")}}
,{{Cssxref("border-right")}}
,{{Cssxref("border-right-style")}}
, and{{Cssxref("border-right-color")}}
.