Frank Olivo

Frank Olivo is the founder of Sagapixel. He writes on a number of topics related to digital marketing, but focuses mostly on web design and SEO.

How to Create Horizontal Lines in HTML

Table of Contents

Making a horizontal rule (or line, as most of us refer to it) is easier than most people think

It’s one small, short, and simple command; <hr>. Here’s what is looks like in it’s simplest form.

And, here’s the amazing code that made it.


       Pretty simple as you can see. That’s all there is to it. I have used the <hr> command all over these tutorials, so this tutorial may get a bit confusing at times. The next line is just a section break.

Horizontal Ruler Attributes:

       There are a couple of attributes or options to the <hr> command. Here’s it is in summary.

<hr attribute1=”..” attribute2=”..”>
Inserts a horizontal line.

  1. size=”..” ; the thickness of the line.
  2. color=”..” ; line color, Internet Explorer only.
  3. width=”..” ; the length of the line.
  4. align=”..” ; alignment of line: RIGHT, LEFT, or CENTER.
  5. noshade ; make a solid line.

       The SIZE is measured in pixels. Try using 3, 5, or maybe 10 to see what thickness’ you like. The COLOR attribute will only work with the Internet Explorer browser so I wouldn’t use it unless absolutely necessary. The COLOR should be in hexadecimal form.

I use WIDTH attribute much more than any of the others. The WIDTH can be entered in pixels or as a percentage of the browser’s window width. Here are some examples with the WIDTH attribute used.

And, here’s the code.

<hr width=”300″>

And, here’s the code.

<hr width=”75%”>

       I really like to use the percentages, because it makes your web page seem to fit to the viewers browser. To see what I mean, increase or decrease the width of your browser window by clicking the edge of the window and dragging it to the right or left. Watch how the line created with a percentage adjusts to the width of the browser window.

The ALIGN attribute is also very useful. It allows you to justify your line to the RIGHT , LEFT, or CENTER. For most browser’s, CENTER is the default and is not needed in the <hr> command. NOSHADE is the last attribute and it make the line solid instead of having a shading effect.

More examples:

       Some more examples are shown below. The HTML code for each is shown indented and in bold. I hope this helps.

<hr width=”200″ align=”left”>

<hr width=”25%” align=”right”>

<hr size=”10″>

<hr size=”10″ noshade>

Leave a Comment if This Helped!

Did you find this tutorial helpful? If so, let us know!

Also while you’re here, stop by our web design page to see some of the Philadelphia web design projects we’ve done for companies in our region!