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

CSS version: CSS 2.1
Value: [thin|medium|thick|length]{1,4} | inherit
Initial: medium (individual properties)
Applies to: all elements
Inherited: no
Few points to note:

  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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments