Border-Width
Border Width
- The border-width property allows specifying the width of each side of the border (top, right, bottom, left) individually or setting a single value to apply the same width to all sides.
- The width of an element's border is controlled by using the width of an element's border
Example:
<!DOCTYPE html>
<html>
<body>
<h2>border-width with different values</h2>
<p style="border-style: double; border-width: thin;">Thin width.</p>
<p style="border-style: dashed; border-width: medium;">Medium width.</p>
<p style="border-style: solid; border-width: thick;">Thick width.</p>
<p style="border-style: dotted; border-width: 5px">Specific length width border.</p>
<p style="border-style: solid; border-width: 2px 4px 5px 10px">Mixed length width border.</p>
</body>
</html>
Output:
Border width-single side:
The property border-width can be set for each single side.
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
Example:
<html>
<head>
<style>
p {
border-style: solid;
padding: 2em;
border-top-width: thin;
border-right-width: thick;
border-bottom-width: medium;
border-left-width: 10px;
}
</style>
</head>
<body>
<h2>border-width (single-side)</h2>
<p>Welcome to Quipoin.</p>
</body>
<html>
Output: