This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

border-width

Summary

Sets the width of an element's four borders. This property can have from one to four values. This is a shorthand property for setting values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.

Overview table

Initial value
medium, for all 4 values
Applies to
All elements
Inherited
No
Media
visual
Computed value
An absolute length, for all 4 values; 0 if the border style is 'none' or 'hidden'
Animatable
Yes
CSS Object Model Property
borderWidth
Percentages
N/A

Syntax

  • border-width: <border-top-width> <border-right-width> <border-bottom-width> <border-left-width>

  • border-width: <width>

  • border-width: medium

  • border-width: thick

  • border-width: thin


Values

medium
Default.


thin
Less than the default width.


thick
Greater than the default width.


<width>
Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see [Values and Units Reference].


<border-top-width> <border-right-width> <border-bottom-width> <border-left-width>
Shorthand syntax. See notes below.


Examples

CSS border width values. 

.medium {
  border-width: medium;
}

.thin {

border-width: thin;

}


.thick {

border-width: thick;

}


.width {

border-width: 10px;

}


.various {

border-width: thick medium thin 10px;

}

View live example

Usage

 * Up to four different widths can be specified, in the following order: top, right, bottom, left.
  • If one width is specified, it is used for all four sides. If two widths are specified, the first is used for the top and bottom borders, and the second is used for left and right borders. If three widths are specified, they are used for top, right/left, and bottom borders, respectively. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.


Related specifications

CSS Level 3 - Backgrounds and Borders Module
Candidate Recommendation

See also

Related articles

Border





























  • border-width

Attributions