CSS - border-width Property
border-width is a shorthand property used to set the width of the four border sides of an element.
Possible Values
length − Any length unit. Length units for this property may not be negative.
thin − A border which is thinner than a border set to medium.
medium − A border which is thicker than a border set to thin, and thinner than a border set to thick.
thick − A border which is thicker than a border set to medium.
Applies to
All the HTML elements.
DOM Syntax
object.style.borderWidth = "2px";
Always declare the border-style property before the border-width property.
Example
Following is the example to show all the border width −
<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 a border with four different width. </p> </body> </html>
Border Width - Shorthand
The border-width property can have four values, three values, two values or one value as demonstrated in the following example:
<html> <head> <style type = "text/css"> p.example1 { border-width:4px 3px 2px 1px; border-style:solid; } p.example2 { border-width:4px 3px 2px ; border-style:solid; } p.example3 { border-width:4px 3px; border-style:solid; } p.example4 { border-width:4px; border-style:solid; } </style> </head> <body> <p class = "example1"> <i>border-width</i> with four different values. </p> <p class = "example2"> <i>border-width</i> with three different values. </p> <p class = "example3"> <i>border-width</i> with two different values. </p> <p class = "example4"> <i>border-width</i> with one value. </p> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google