RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-width below:

border-width · WebPlatform Docs

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