Embedded Files
CSS Border Width
CSS Border Width
The width of the four borders is specified by the border-width attribute.
The width can be specified as a specific size (in px, pt, cm, em, and so on) or as one of three pre-defined values: thin, medium, or thick:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the 4 borders! Now I have a six easy question!</p>
<p class="one">1. What is HTML?</p>
<p class="two">2. What is CSS?</p>
<p class="three">3. What is JAVASCRIPT?</p>
<p class="four">4. Who is the creator of website?</p>
<p class="five">5. Who is my supervisor?</p>
<p class="six">6. What is your dreams?</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
CSS
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
Specific Side Widths
Specific Side Widths
The border-width property can have one of four values (one for the top border, one for the right border, one for the bottom border, and one for the left border):
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The border-width Property</h2>
<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>
<p class="one">Howdy!</p>
<p class="two">This website was created by me (snickered).</p>
<p class="three">Isn't programming amazing?</p>
<p class="four">That you have the ability to create whatever you wish!</p>
<p class="five">If you want to pursue your ambition of becoming a programmer.</p>
<p class="six">Never, ever quit up! Regardless of what occurred!</p>
<p class="seven">Continue your efforts! I'm sure you can accomplish it!</p>
<p class="eight">I'm pulling for you! Partner (winks and smiles)</p>
</body>
</html>
CSS
p.one {
border-style: solid;
border-width: 5px 20px;
}
p.two {
border-style: solid;
border-width: 20px 5px;
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px;
}
p.four {
border-style: solid;
border-width: 35px 4px 12px 20px;
}
p.five {
border-style: solid;
border-width: 25px 25px 25px 25px;
}
p.six {
border-style: solid;
border-width: 10px 10px 10px 10px;
}
p.seven {
border-style: solid;
border-width: 4px 6px 8px 10px;
}
p.eight {
border-style: solid;
border-width: 15px 15px 15px 15px;
}
Page updated
Google Sites
Report abuse