CSS border-width Property


Example

Set the width of the four borders:

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

Try it yourself »

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


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-width 1.0 4.0 1.0 1.0 3.5


CSS Syntax

border-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Specifies a medium border. This is default Play it »
thin Specifies a thin border Play it »
thick Specifies a thick border Play it »
length Allows you to define the thickness of the border Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderWidth property



Color Picker

colorpicker