Change thickness of HR using CSS

Hey folks,
I am up with another feature of CSS. In this tutorial, we will learn how to change the thickness of HR using CSS. It represents the horizontal rule. We can use it in many ways like separating two paragraphs.

We use many attributes in the HR tag. But we use such formatting effects to style the horizontal line. HR plays an important role in designing our web page. Because it is used in a variety of ways to style our page.

How to change thickness of HR using CSS

First of all, we create an Html file. Then we link it to our CSS file by a link tag.

Creating HR Tag.html file

<html>
<head>
<title>
  CSS
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>This is the sample Heading</h1>
  <p>This is the first paragraph</p>
  <hr>
  <p>This is the first paragraph</p>
  <hr>
</body>
</html>

We use the syntax below to link our style.css to our Html file

<link rel="stylesheet" type="text/css" href="style.css">

But you can also write the same in a single file under the style tag in the head section.

Creating style.css file

body{
  color: #0000dd;
}
h1{
  color: #00dd00;
}
p{
  text-align: left;
  text-transform: capitalize;
}
hr{
  height: 10px;
  width: auto;
  background-color:#dd00dd;
  border: solid 1px;
}

So to specify the text colour of the whole text body we use the color attribute. H1 is for heading and color attribute changes the text colour. But the HR tag has many more effects like -:

  • Changing the border colour
  • Height of the line
  • Border colour
  • Width of the line

So to change the width of the HR we set height in pixels. And for the width, we can set it in pixels or we can set it to auto. It is a keyword which adjusts the width according to our web page. We can adjust the border in pixels. And we can also set it to solid or transparent.

I hope you understood the code well. Feel free to ask your doubts in the comment section below.

You may also read,

Leave a Reply

Your email address will not be published. Required fields are marked *