border-width

Table of contents

  1. 1. Summary
  2. 2. Syntax
  3. 3. Examples
  4. 4. Specifications
  5. 5. Browser compatibility
  6. 6. See Also
Page Notifications Off

« CSS « CSS Reference

Summary

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

Syntax

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

where:

width
Is a <border-width> denoting the thickness of the border to apply to all four edges. It is used only in the one-value syntax.
horizontal
Is a <border-width> denoting the thickness of the border to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
vertical
Is a <border-width> denoting the thickness of the border to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
top
Is a <border-width> denoting the thickness of the border to apply to the top edge. It is used only in the three- and four-value syntaxes.
bottom
Is a <border-width> denoting the thickness of the border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
right
Is a <border-width> denoting the thickness of the border to apply to the top edge. It is used only in the four-value syntax.
left
Is a <border-width> denoting the thickness of the border to apply to the top edge. It is used only in the four-value syntax.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

and:

border-width
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:
thin
fake
 A thin border
medium
fake
 A medium border
thick
fake
 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.

Examples

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 */

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation No direct change, the <length> CSS data type extension has an effect on this property.
CSS 2.1 Recommendation Added the constraint that values' meaning must be constant inside a document.
CSS 1 Recommendation  

Browser compatibility

  • Desktop
  • Mobile

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 1.0 (1.9.2) ? ? ? ?

See Also

Tags (2)

Edit tags

Attachments (0)

 

Attach file