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

The horizontal rule 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 attributes to help you align or style it and other caveats to consider. We will cover how to: Embed an element Change the width of an element Align horizontally Adjust height Give 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 , , and of . That's where important action is going to take place. 28 44 108 index.html 1. Embedding a 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 and of our file and add an . 28 44 index.html 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 is a . It takes up the whole width of its parent container. This tells the difference between a block-level and an inline-level element. block-level element article Since the look of the 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 Adjusting the width of a horizontal rule is as easy as adding a simple attribute and giving it a value. The value can be a number, pixel units, or percentage: , , and respectively. width width="30" width="30px" width="30%" When the value of the 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. width One important caveat to consider is that other relative units such as the and are not supported by the width attribute. rem em The width of the horizontal rule can also be adjusted using the CSS property. width { : ; } hr width 20% Enough talk! Let's go on lines & of our file and set the attribute of our to . 28 44 index.html width 80px Much better, don't you think?! Have you noticed that the horizontal rule aligned itself to the center? Well, once you set the 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. width 3. How to align an element To align the horizontal rule, we use the attribute. It can take one of the following three values: left, right, and center. Align Let's go on lines & of our index.html and set the attribute to 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. 28 44 Align Align="right" 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 Increasing the height of a 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: , , and respectively. size="8" size="8px" size="8%" The size of the horizontal rule can also be set using the CSS property. height { : ; } hr height 10px Let's go on lines & of our file and set the size attribute to . 28 44 index.html 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 attribute. It has only one value which is ; like so: . noshade noshade noshade="noshade" Let's apply it to our line and see its effect. There you go! But what if instead of the dark-grey default color, we matched the color of our with the color of our customer's name? 5. How to change the color of Unfortunately, has no color attribute. In this case, we can use CSS to achieve that result. Let's go on line of our and change the to . 109 index.html background-color #8d8f9285 Perfect! But did you notice the weird black color around the horizontal rule? That's because a 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 of the file, we are going to set the property to . 111 index.html border none Awesome! It looks cool now. Aligning and styling the 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.