CSS Border Width Longhand Properties

The border-top-width, border-right-width, border-bottom-width and border-left-width CSS properties set the width of one border of an element. The width may be set in px, em, vw or any other length unit. Percentages are not allowed, meaning that border width can't be relative to parent's width/height like padding and margin.

Use border-width as shorthand to set each border width indepently or all the same. The border property will give the four borders the same width, color and style.

pxptemvw...
border-bottom-width: width
border-bottom-width: 5px;
border-left-width: .2em;
border-right-width: .5vw;

See length for information on the different units.

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.

Browser Support: Full

Usage

A border-width longhand property sets the width of one of the four borders, while preserving its color and style. This makes it good for overriding a more general property like border or border-width.

.example {
border: 5px solid orange; border-right-width: 20px; border-left-width: 20px;
}

The border widths above may also be set using the border-width shorthand:

border-width: 10px 5px;

The border-width properties are usually used along with border-color, border-style or their longhand properties: border-bottom-color, border-bottom-style...

Borders and width

The width of an element is, by default, the width of the content area. It doesn't include borders or padding. The box-sizing property can be used to include them. This means an element with width: 100% plus some padding and/or border won't overflow.

.box {
width: 50%; border: 5px solid #f0f0f0; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

Try removing the box-sizing rules to see it for yourself.

Useful Resources

One comment

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>