CSS border width:-
The CSS border property specifies the width of the four borders.
The width can be set by four sizes in px, pt, cm, and em also, or can be used as one of the three predefined values thin, medium, and thick.
<!DOCTYPE html>
<html>
<head>
<style>
p. one {border-style: solid ;
border-width: medium;}
p. two {border-style: solid;
border-width: 5px;}
p. three {border-style: dotted;
border-width: medium;}
p. four {border-style: dotted;
border-width: thick;}
p. five {border-style: double;
border-width: thin;}
p. six {border-style: double;
border-width: 20px;}
</style>
</head>
<body>
<h1> The border width property </h1>
<p> From this property you can specify the property of the border. </p>
<p class="one">This is a paragraph. </p>
<p class="two">This is a paragraph.</p>
<p class="three">This is a paragraph. </p>
<p class="four">This is a paragraph. </p>
<p class="five">This is a paragraph. </p>
<p class="six">This is a paragraph. </p>
</body>
</html>
Try this code for a better experience
NOTE:- The border-width property will not work alone you have to use border-style property with or before the border-width.
Specifies side width:-
The border-width property can be one of them top border, right border, left border, and bottom border also.
<!DOCTYPE html>
<html>
<head>
<style>
p. one{border-style: solid;
border-width: 5px 15px;} /* 5px from top and bottom, 15px from side*/
p. two{border-style: solid;
border-width: 20px 15px 10px;} /*20px from top, 10px from right, 10px from bottom */
p. three{border-style: solid;
border-width: 10px 15px 20px 25px;} /*10px from top, 15px from right, 20px from bottom, 25px from left */
</style>
</head>
<body>
<h1> CSS Border Width Property <h1>
<p> The border-width property can be one of them top border, right border, left border, and bottom border also.</p>
<p class="one">This is a paragraph. </p>
<p class="two">This is a paragraph. </p>
<p class="three">This is a paragraph. </p>
</body>
</html>
Try this code for a better experience
0 Comments