CSS border-width property
➔ The border-width property specifies the width of the four borders(top, right, bottom, left).
➔ border-width can have values such as thin, medium, or thick.
➔ The border-width value can also be in px, pt, cm, em etc.
Syntax
border-width: medium | thin | thick | length | initial | inherit;
Property values
| Common Value | Description |
|---|---|
| medium | Specifies a medium border. This is default. |
| thin | Specifies a thin border. |
| thick | Specifies a thick border. |
| length | Specifies the thickness of the border. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
.p1 {
border-width: thin;
border-style: solid;
border-color: black;
}
.p2 {
border-width: medium;
border-style: solid;
border-color: red;
}
.p3 {
border-width: thick;
border-style: solid;
border-color: blue;
}Click on the "Try it Now" button to see how it works.
border-width: 1px 2px 3px 4px;
Here,top:1px.
right:2px.
bottom:3px.
left:4px.
border-width: 1px 2px 3px;
Here,top:1px.
right:2px.
bottom:3px.
left:2px.
border-width: 1px 2px;
Here,top:1px.
right:2px.
bottom:1px.
left:2px.
border-width: 1px;
Here,top:1px.
right:1px.
bottom:1px.
left:1px.
Example
.p1 {
border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: black;
}
.p2 {
border-width: 1px 2px 3px;
border-style: solid;
border-color: red;
}
.p3 {
border-width: 1px 2px;
border-style: solid;
border-color: blue;
}
.p4 {
border-width: 1px;
border-style: solid;
border-color: blue;
}Click on the "Try it Now" button to see how it works.