border-width
Description
border-width shorthand property sets the width for the overall border of an element or for each side individually.
| Item | Value |
|---|---|
| Initial value | |
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.borderWidth="thin thick" |
| Applies to | All elements. |
border-width:thin medium thick 10px;
is equal to
- top border is thin
- right border is medium
- bottom border is thick
- left border is 10px
border-width:thin medium thick;
is equal to
- top border is thin
- right and left borders are medium
- bottom border is thick
border-width:thin medium;
is equal to
- top and bottom borders are thin
- right and left borders are medium
border-width:thin;
is equal to all four borders are thin.
Syntax and Property Values
border-width: width [ width width width]
where width is
non-negative length | medium | thick | thin | inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| thin | thin border |
| medium | medium border. Default |
| thick | thick border |
| length | Set the thickness of the border |
| inherit | Inherit the border width from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
div {<!-- w ww . ja va 2 s.co m-->
padding: 3px;
border-color: black;
border-style: solid;
background: mistyrose;
margin: 5px;
border-width: thin;
}
</style>
</head>
<body>
<div>thin</div>
</body>
</html>
The code above generates the following result.
