CSS Basic

CSS HOME
CSS Introduction
CSS Syntax
CSS How To
CSS Background
CSS Text
CSS Font
CSS Box Model
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSS List
CSS Table

CSS Advanced

CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Image Gallery
CSS Image Opacity
CSS Media Types
CSS Don't
CSS Summary

CSS Examples

CSS References

CSS Reference
CSS Ref Alphabetical
CSS Ref Aural
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames

CSS Quiz

CSS Quiz
CSS Exam

CSS border-width Property

Complete CSS Reference

Example

Set the width of the four borders:

p
{
border-style:solid;
border-width:15px;
}

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 change the color.

Default value:	medium
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.borderWidth="thin thick"

Browser Support

The border-width property is supported in all major browsers.

Note: Internet Explorer does not support the property value "inherit".

Property Values

Value	Description
thin	Specifies a thin border
medium	Specifies a medium border. This is default
thick	Specifies a thick border
length	Allows you to define the thickness of the border
inherit	Specifies that the border width should be inherited from the parent element

CSS tutorial: CSS Border

HTML DOM reference: borderWidth property