CSS border-width Property

Set a border-width:

div {border-width: thin;}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The border-width property sets the width of an element’s four borders. This property can have from one to four values.

Examples:

  • border-width: thin medium thick 10px;
    • top border is thin
    • right border is medium
    • bottom border is thick
    • left border is 10px
  • border-width: thin medium thick;
    • top border is thin
    • right and left borders are medium
    • bottom border is thick
  • border-width: thin medium;
    • top and bottom borders are thin
    • right and left borders are medium
  • border-width: thin;
    • all four borders are thin

Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatable – Try it
Version: CSS1
JavaScript syntax: object.style.borderWidth=”1px 5px” Try it
CSS Syntax
border-width: medium|thin|thick|length|initial|inherit;
Property Values
Value Description Play it
medium Specifies a medium border. This is default div {
border-style:solid;
border-width:medium;
}
thin Specifies a thin border div {
border-style:solid;
border-width:thin;
}
thick Specifies a thick border div {
border-style:solid;
border-width:thick ;
}
length Allows you to define the thickness of the border div {
border-style:solid;
border-width:length;
}
initial Sets this property to its default value. Read about initial div {
border-style:solid;
border-width:initial ;
}
inherit Inherits this property from its parent element. Read about inherit
Example

Set the width of the top and bottom borders to 10px, and the width of the left and right borders to 1px:

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

Try it Yourself »