CSS border-width property
CSS border-width property
Description
border-width is a shorthand property used to set the width of an element’s four borders.
Possible values
- length – Any length unit. Length units for this property cannot be negative.
-
thin – A border thinner than medium.
-
medium – Thicker than thin, thinner than thick.
-
thick – Thicker than medium.
Applies to
All HTML elements.
DOM Syntax
object.style.borderWidth = "2px";
Example
The following is an example showing the width of all borders −
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a border with four different width.
</p>
</body>
</html>
This will produce the following result −
