Search within TutorialsPark

CSS border-width Property


To set the width of an elements borders


Definition and Notes.

1. The CSS border-width property is used to set the width of overall border of the element or for each side individually

2. The border-width is applied only when the the value of border-style is something other than none, or else its reset to zero (0)

3. Seperate width can be assigned for each borders using the 1 to 4 values.

a. border-width: 10px 15px 20px 25px (i.e clockwise starting from top)

10px : top

15px : right

20px : bottom

25px : left


b. border-width: 10px 15px 20px (i.e clockwise starting from top)

10px : top

15px : right and left

20px : bottom


c. border-width: 10px 15px (i.e clockwise starting from top)

10px : top and bottom

15px : right and left


d. border-width: 10px

15px : all edges of the border


Syntax:

CSS border-width property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- You can even specify values for border-width in percentages(%)

Property Values

Value Description
thin To create a thin border.
medium The create a border of medium width.
thick To set a thick border.
length To set the width of border using length values(px, pt, cm, em etc).Negative width are not allowed
inherit The element inherits the values of its parent element's border-width.

Specifications

Specs Value
Name border-width
Value thin | medium | thick | length {1,4}
Initial Value Not Defined for shorthand Properties
Applies to All Elements
Javascript syntax object.style.borderWidth=" 20px "
Inherited No
Computed Value See Individual Properties
Browser Support internetexplorer safari firefox opera chrome

Related Examples.