CSS border-width – set element border width of four sides

The border-width properties specify the width of the border area of an element.

CSS property border-width

1. When four values are specified this is the order:

   border-top-width, border-right-width, border-bottom-width, border-left-width
   

2. When less than four values are specified:

   h1 { border-width: thin }                   /* thin thin thin thin */
   h1 { border-width: thin thick }             /* thin thick thin thick */
   h1 { border-width: thin thick medium }      /* thin thick medium thick */
   

3. border-style must be set to something other than none for border-width to be applicable.

Example – border-width thin, medium, thick

<style type="text/css">
.foo {
 width: 100px; height: 100px;
 border-style: solid;
 border-color: lightgreen;
 border-width: thin medium thick thin ;
}
</style>
<div class="foo">
Hello world in div
</div>

Example – border-width in pixel

<style type="text/css">
.foo {
  width: 100px; height: 100px;
  border-style: solid;
  border-color: lightgreen;
  border-width: 5px 10px 15px 20px ;
}
</style>
<div class="foo">
Hello world in div
</div>

Related

• CSS border - define border properties of an element
• CSS border-color - define color of four borders
• CSS border-style tutorial and examples
• CSS border radius and round corners examples

Specification

• W3C CSS 2.1 border-width specification