By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Border-width Property

Reference on the CSS-border width property.

Edited: 2015-12-09 14:53

The CSS border-width property is used to control the width of the borders on a HTML element.

div {
  border-width: 1px;
}

There are four borders on a HTML element, and each of them can also be controlled individually. Controlling the borders individually can be done with the border-bottom-width, border-top-width, border-left-width and border-right-width properties.

Possible Values

Read Units of Measurement to understand the values

Inherited? NO!

Border-width example

The border-width property is usually used in combination with the border-style and border-color properties, but it can also be used in combination with border to overwrite an already declared style. For example:

div {
  border-width:1px;
  border-style:solid;
  border-color:black;
}

Which would appear like:

Another way to use border-width is to overwrite a more generally applying declaration, such as that applied with the border property.

div {
  border: 1px solid black;
  border-width:10px;
}

Combining the use of the more generally applying shorthand properties with that of the orientational, or so-called more specific properties, can be a useful way to minimize your CSS.