The border-width shorthand CSS property sets the width of an element's border.

<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">border-width</span><span class="token punctuation">:</span> thin<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> medium<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> thick<span class="token punctuation">;</span> <span class="token comment">/ &lt;length&gt; values /</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 1.2rem<span class="token punctuation">;</span> <span class="token comment">/ vertical | horizontal /</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 2px 1.5em<span class="token punctuation">;</span> <span class="token comment">/ top | horizontal | bottom /</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 1px 2em 1.5cm<span class="token punctuation">;</span> <span class="token comment">/ top | right | bottom | left /</span> <span class="token property">border-width</span><span class="token punctuation">:</span> 1px 2em 0 4rem<span class="token punctuation">;</span> <span class="token comment">/ Global keywords /</span> <span class="token property">border-width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

border-width

The border-width shorthand CSS property sets the width of an element's border.

Constituent properties

This property is a shorthand for the following CSS properties:

border-bottom-width border-left-width border-right-width border-top-width

Syntax

/* Keyword values */ border-width: thin; border-width: medium; border-width: thick;  /* <length> values */ border-width: 4px; border-width: 1.2rem;  /* vertical | horizontal */ border-width: 2px 1.5em;  /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm;  /* top | right | bottom | left */ border-width: 1px 2em 0 4rem;  /* Global keywords */ border-width: inherit; border-width: initial; border-width: revert; border-width: unset; 

The border-width property may be specified using one, two, three, or four values.

When one value is specified, it applies the same width to all four sides. When two values are specified, the first width applies to the top and bottom, the second to the left and right. When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom. When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).

Values

<line-width>

Defines the width of the border, either as an explicit nonnegative <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

Initial value	as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: medium
Applies to	all elements. It also applies to ::first-letter.
Inherited	no
Computed value	as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hidden
Animation type	as each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length

Formal syntax

<line-width>{1,4}
where <line-width> = <length> | thin | medium | thick

Examples

A mix of values and lengths

HTML

<p id="sval">     one value: 6px wide border on all 4 sides</p> <p id="bival">     two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval">     three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval">     four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> 

CSS

#sval {   border: ridge #ccc;   border-width: 6px; } #bival {   border: solid red;   border-width: 2px 10px; } #treval {   border: dotted orange;   border-width: 0.3em 0 9px; } #fourval {   border: solid lightgreen;   border-width: thin medium thick 1em; } p {   width: auto;   margin: 0.25em;   padding: 0.25em; } 

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 4 # the-border-width

See also

The border-related shorthand properties: border, border-style, border-color The border-width-related properties: border-bottom-width, border-left-width, border-right-width, border-top-width Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiРусский中文 (简体) Change language