CSS border-width Property
CSS border-width property is a shorthand property for setting all the border width properties in one statement.
Following properties can be sets,
Usages
The following table outline the usages and version history of this property.
| Default value: | medium |
| Applies to: | All elements |
| Inherited: | No |
| Version: | CSS1 |
| JavaScript Syntax: | object.style.borderWidth = "2px" |
Syntax
Here is a syntax for the CSS border-width property
border-width: medium | thin |thick | length | initial | inherit;
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| medium | Default. Set a medium border |
| thin | Set a thin border |
| thick | Set a thick border |
| length | Set length value in px, pt, cm, em, etc that define border thickness |
| initial | Sets default value of this property |
| inherit | Inherits this property from its parent element |
Examples
The example below shows to sets border width.
.outline-1 {
outline-width: medium;
}
.outline-2 {
outline-width: thin;
}
.outline-3 {
outline-width: thick;
}
.outline-4 {
outline-width: 5px;
}
.outline-5 {
outline-width: 5px 10px;
}
.outline-6 {
outline-width: 5px 10px 2px;
}
Browser Compatibility
- Google Chrome 1+
- Mozilla Firefox 1.5+
- Internet Explorer 8+
- Opera 7+
- Safari 1.2+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.