Web/CSS/border-width

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Constituent properties

This property is a shorthand for the following CSS properties:

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: 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`		A thin border
`medium`		A medium border
`thick`		A thick border

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`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-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 `hidden` `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden` `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden` `border-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 length `border-left-width`: a length `border-right-width`: a length `border-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	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-width' in that specification.	Candidate Recommendation	No direct change; the `<length>` CSS data type extension has an effect on this property.
CSS Level 2 (Revision 1)The definition of 'border-width' in that specification.	Recommendation	Added the constraint that values' meaning must be constant inside a document.
CSS Level 1The definition of 'border-width' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-width`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 3.5	Safari Full support 1	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 3	Samsung Internet Android Full support 1.0

Legend

Full support: Full support