How to change the thickness of hr tag using CSS ?
The <hr> tag in HTML is used to create a horizontal rule or a thematic break in an HTML page. The thickness of the <hr> tag defines the height of the horizontal line. You can change it using the CSS height property.
Syntax:
<hr property: value ; >
Property values:
| Property Values | Description |
|---|---|
| align | Specifies the alignment of the horizontal rule. Values can be left, center, or right. |
| noshade | Specifies whether the bar has a shading effect. The default value is noshade, indicating no shading. |
| size | Specifies the height of the horizontal rule. The default value is in pixels. |
| width | Specifies the width of the horizontal rule. The default value is in pixels. |
| color | Specifies the color of the horizontal rule. Note: Not supported by HTML5. |
Example 1: Implementation of <hr> tag to insert a horizontal rule along with some CSS properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Changing <hr> tag thickness</title>
<style>
div {
width: 300px;
}
h1,
h3 {
color: green;
}
hr {
position: relative;
top: 20px;
border: none;
height: 12px;
background: black;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div>
<h1>w3wiki</h1>
<hr />
<h3>A Computer Science Portal</h3>
</div>
</body>
</html>
Output:
changing the thickness of hr tag using CSS Example Output
Example 2: This example demonstrates the different styles of the horizontal rule or a thematic break in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing <hr> tag thickness</title>
<style>
body {
background-color: #f0f0f0;
width: 80px;
float: center;
}
div {
width: 200px;
}
hr.class-1 {
border-top: 10px solid #8c8b8b;
}
hr.class-2 {
border-top: 3px double #8c8b8b;
}
hr.class-3 {
border-top: 1px dashed #8c8b8b;
}
hr.class-4 {
border-top: 1px dotted #8c8b8b;
}
hr.class-5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}
hr.class-6 {
background-color: #fff;
border-top: 5px dotted #8c8b8b;
}
</style>
</head>
<body>
<div>
<hr class="class-1" />
<br />
<hr class="class-2" />
<br />
<hr class="class-3" />
<br />
<hr class="class-4" />
<br />
<hr class="class-5" />
<br />
<hr class="class-6" />
</div>
</body>
</html>
Output:
changing the thickness of hr tag using CSS