CSS border-width

The border-width CSS property sets the width of the four borders of an element, all the same or independently. It take up to four values which are assigned clockwise, to the top, right, bottom and left borders respectively.

pxptemvw...
border-width: widths
border-width: 5px 10px 15px 20px;   /* order: top right bottom left */
border-width: 5px 10px 15px;        /* order: top right&left bottom */
border-width: 5px 10px;             /* order: top&bottom right&left */
border-width: 5px;                  /* all borders */
border-width: .2em;
border-width: .5vw;

A border width property won't show any border without a border-style set. eg. border-top-width: 5px; won't do it without border-top-style: solid; or equivalent.

Values are assigned clockwise starting with the top border. If the left value is missing, it takes the same as right. If bottom and left are missing, bottom is the same as top. If only one width is given, it applies to the four borders.

Browser Support: Full.

Usage

Use border-width to set the four widths at the same time.

.example {
border-style: solid; border-color: orange; border-width: 20px 15px 10px 5px;
}

Width Units

CSS has several length units which may be used for borders. Note that percentages are not allowed. The most common length units are:

  • px is a CSS pixel. It's supposed to measure roughly the same accross devices.
  • em equals the font size of the element as inherited or set by font-size.
  • vw equals 1% of the viewport's width.

Borders and width

The width of an element is, by default, the width of the content area. It doesn't include borders or padding. This makes it harder to deal with percentage widths plus borders. For example, a box with 100% width plus border or padding would overflow. Counting the border as part of the width solves the problem. The box-sizing property is exactly the one:

.box {
width: 100%; border: 10px solid green; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>