border-width property CSS Reference

Definition and Usage

The border-width CSS property sets the width of the border of a box. Using the shorthand property border is often more convenient.

  • Initial the concatenation of the initial values of its longhand properties:
    • border-top-width: medium
    • border-right-width: medium
    • border-bottom-width: medium
    • border-left-width: medium
  • Applies to all elements
  • Inherited no
  • Media visual
  • Computed Value as each of the properties of the shorthand:
  • Animatable as each of the properties of the shorthand:
    • border-bottom-width: yes, as a length
    • border-left-width: yes, as a length
    • border-right-width: yes, as a length
    • border-top-width: yes, as a length
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: <br-width>{1,4}
border-width: width                  /* One-value syntax */
border-width: horizontal vertical    /* Two-value syntax */
border-width: top vertical bottom    /* Three-value syntax */
border-width: top right bottom left  /* Four-value syntax */
border-width: inherit


Is either a non-negative explicit <length> value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
A thin border
A medium border
A thick border
The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
Is a keyword indicating that all four values are inherited from their parent's element calculated value.


border: ridge #ccc;
border-width: 6px;  /* same as "border: ridge #ccc 6px";  6px wide border on all 4 sides */
border: solid red;
border-width: 2px 10px;  /* 2px wide top and bottom border, 10px right and left border */
border: dotted orange;
border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border right and left */
border: solid lightgreen;
border-width: medium 0 1px thick;  /* three different width, no right border */


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 or earlier) (85)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNA1.0 (1.9.2)NANANA

Relative articles