How to Align the <hr> Tag and Deal with its Caveats

by Blaise P. ShyakaSeptember 13th, 2020

Too Long; Didn't Read

The horizontal rule <hr> is simply a horizontal line used to signal a change in topic or a thematic break in a section of an HTML page. If you have ever tinkered with it, you may have been content with its default settings. However, many developers run into a couple of issues when trying to customize it to suit their design needs.

Company Mentioned

featured image - How to Align the <hr> Tag and Deal with its Caveats

The horizontal rule

<hr>

is simply a horizontal line used to signal a change in topic or a thematic break in a section of an HTML page. If you have ever tinkered with it, you may have been content with its default settings. However, many developers run into a couple of issues when trying to customize it to suit their design needs.

In this article, I am going to show you

<hr>

attributes to help you align or style it and other caveats to consider. We will cover how to:

Embed an
```
<hr>
```
element
Change the width of an
```
<hr>
```
element
Align
```
<hr>
```
horizontally
Adjust
```
<hr>
```
height
Give
```
<hr>
```
a color of your choice

Below is a simple testimonial section of a website. We are going to use this project in order to follow along and see what effects our changes are going to have.

Feel free to go ahead and read the code. However, If you are in a rush or it is too much for you, just keep an eye on the lines 28, 44, and 108 of

index.html

. That's where important action is going to take place.

1. Embedding a

<hr>

line

Looking at our page above, it is difficult to know where one customer testimonial starts and ends. It requires a little more attention to wrap your head around it.

Let's go ahead on lines 28 and 44 of our

index.html

file and add an

<hr>

It looks much better now. Have you noticed that our horizontal rule spanned across the whole width of its parent element? This is because a

<hr>

is a block-level element. It takes up the whole width of its parent container. This article tells the difference between a block-level and an inline-level element.

Since the look of the

<hr>

spanning across the whole width of the container doesn't look cool, let's go ahead and adjust its width.

2. Adjusting the width of a

<hr>

Adjusting the width of a horizontal rule is as easy as adding a simple

width

attribute and giving it a value. The value can be a number, pixel units, or percentage:

width="30"

width="30px"

, and

width="30%"

respectively.

When the value of the

width

attribute is a number, it is calculated in pixels. However, if it is in percentage, it will be calculated based on the width of its parent container.

One important caveat to consider is that other relative units such as the

rem

and

em

are not supported by the width attribute.

The width of the horizontal rule can also be adjusted using the CSS

width

property.

hr {
width: 20%;
}

Enough talk! Let's go on lines 28 & 44 of our

index.html

file and set the

width

attribute of our

<hr>

80px

Much better, don't you think?! Have you noticed that the horizontal rule aligned itself to the center? Well, once you set the

<hr>

width

attribute, it will by default be aligned to the center. But what if you wanted to align it to either side of the container? Well, we can do that.

3. How to align a

<hr>

element

To align the horizontal rule, we use the

Align

<hr>

attribute. It can take one of the following three values: left, right, and center.

Let's go on lines 28 & 44 of our index.html and set the

Align

attribute to right:

Align="right"

. However, this is for experimental purposes. As you are going to notice shortly, the right alignment will be looking horrible in our project. After the little experiment, we will revert to our center alignment.

It looks horrible! Let's revert to our center-alignment.

I would like to make some more changes. How about we increase the height of our horizontal rule by a few pixels? Let's try it and see!

4. How to increase the size/height of

<hr>

Increasing the height of a

<hr>

is also easy. We can use the size attribute. Like the width attribute, it can take a number, pixel units, or percentage as its value:

size="8"

size="8px"

, and

size="8%"

respectively.

The size of the horizontal rule can also be set using the CSS

height

property.

hr {
height: 10px;
}

Let's go on lines 28 & 44 of our

index.html

file and set the size attribute to

5px

Great! But If you look closely, you will notice that our horizontal rule looks like a hollow tube. This can be fixed by the

<hr>

noshade

attribute. It has only one value which is

noshade

; like so:

noshade="noshade"

Let's apply it to our

<hr>

line and see its effect.

There you go! But what if instead of the dark-grey default color, we matched the color of our

<hr>

with the color of our customer's name?

5. How to change the color of

<hr>

Unfortunately,

<hr>

has no color attribute. In this case, we can use CSS to achieve that result.

Let's go on line 109 of our

index.html

and change the

background-color

#8d8f9285

Perfect! But did you notice the weird black color around the horizontal rule? That's because a

<hr>

by default has a border around it. We can either change the color of the border to match its background-color or just get rid of it.

Let's go with the later. On line 111 of the

index.html

file, we are going to set the

border

property to

none

Awesome! It looks cool now.

Aligning and styling the

<hr>

can be tricky, yet it is as easy as setting various attributes as we used them above. I hope this guide will save you a lot of headaches while working on your projects.