How to Add a Horizontal Line (Rule) to Blogger Blogspot Post

Another option that the latest visual Blogger's post editor is lacking is the "Insert horizontal line" option (this option is available in the Google Sites's visual editor of the page content).

A horizontal line (or, horizontal rule) is a line which can be

• with different length (or width),
• aligned on the left, at the center, or on the right,
• with different thickens (or size), 
• with different color, 
• solid, dashed, dotted etc.

Mainly, it is used as a section divider.

To add a horizontal line in a Blogger Blogspot post, you have to write an appropriate code through the HTML editor. Below are some HTML code examples for horizontal line.

Note #1: The visual result may slightly differ in different browsers (the page was tested in IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5 installed on Windows Vista SP2).

Adding Horizontal Line with the HTML <hr> Tag

1. The Basic <hr> Tag

The code:

<hr>

The visual result:

---

2. Additional Attributes for the <hr> Tag

The code for a horizontal line with added attributes is 

<hr align="center" color="green" size="2" width="80%">

• The align attribute should be added to the code if the width of the horizontal line is less than the text width. Values for this attribute are: left, center or right.
• The width attribute should be added to the code if you want a horizontal line with a width is less than the text width. Values for this attribute can be expressed in pixels (e.g. 200px - you can skip the "px" after the number) or in percent (e.g. 50%).
• The color attribute should be added to the code if you want a colored horizontal line. Values for this attribute can be express as a color name (e.g. red green, blue, orange - for additional HTML color names check any of these links: link 1, link 2, link 3, link 4) or the color's hex code (we recommend the Multitoolbox's Color picker and this simple "hex to rgb" and "rgb to hex" code converter)
• The size attribute should be added to the code if you want a thicker horizontal line. Values for this attribute are 1, 2, 3, etc.

Note #2: The tag <hr> is the same as <hr align="center" size="2" width="100%"> and in most browsers the visual result is a horizontal line with shade. For larger sizes, the horizontal line looks more like a rectangular frame, but once you add the color attribute it turns to a fully colored line (in Firefox with rounded corners - visible when the size is larger).


Here are some examples:

Example #1

The code: 

<hr align="right" color="orange" size="3" width="500">

The visual result:

---

Example #2

The code: 

<hr align="center" color="#ff1100" size="5" width="60%">

The visual result:

---

Example #3

The code: 

<hr size="5">

The visual result:

---

Example #4

The code: 

<hr size="5" color="#999999">

The visual result:

---

Example #5

The code: 

<hr color="green" width="45%">

The visual result:

---

Adding Horizontal Line with the HTML <div> Tag

The horizontal lines can be styled by adding appropriate CSS properties, but the ones I've tested did not produce the result I've expected in all of the five browsers (IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5), especially when I wanted to insert dotted or dashed horizontal line. If you still want to try this type of styling check these links: link 5, link 6 or link 7.

1. Adding left aligned horizontal line

Example #6: Full width horizontal line

The code

An example of a dashed horizontal line
<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>
The first line of text after the horizontal line

The visual result:

An example of a dashed horizontal line

The first line of text after the horizontal line


Note #3: The above code adds a full width, colored (#DB1200), dashed, 2px thick horizontal line. If you use this code for adding horizontal line, or any from the following examples, and you want to switch from the HTML to the visual Blogger Blogspot post editor right after entering the code, make shore that , before that you add some text instead of the line "The first line of text after the horizontal line" before switching. I don't know why, but when I inserted only "<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>" and switched to the visual editor, the above horizontal line start appearing every time I hit the enter button.


Note #4: The dashed attribute, also known as a CSS border-style property, has the following alternatives: dotted, solid, double, groove and ridge. Here are the results of the above code after changing only the dashed attribute (for the last three attributes the line thickness is set to 6px):  

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line


An example of a groove horizontal line

The first line of text after the horizontal line


An example of a ridge horizontal line

The first line of text after the horizontal line

Example #7: Horizontal line with predefined width

A left aligned horizontal line with width smaller than the text width can be inserted similarly. You only need to add the width attribute (pixels or percentage) to the code in Example #6, that is

The code

An example of a dashed horizontal line
<div style="border-top: 2px dashed #0B5394; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
The first line of text after the horizontal line

The visual result for the horizontal lines from Example #6 with the width attribute added and color changed to #0B5394:

An example of a dashed horizontal line

The first line of text after the horizontal line 

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line


An example of a ridge horizontal line

The first line of text after the horizontal line


2. Adding centered or right aligned horizontal line

To add a horizontal line which is centered or right aligned (this makes sense if the line width is smaller than the text width) with the <div> tag, I got the desired result by using another <div> tag "around" the <div> tag in the code from the Example #7 as follows:

The code for centered horizontal line

An example of a dashed horizontal line
<div align="center">
<div style="border-top: 2px dashed #38761D; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
</div>
The first line of text after the horizontal line

The visual result for the centered horizontal lines from Example #7 with color changed to #38761D:

An example of a dashed horizontal line

The first line of text after the horizontal line 

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line


An example of a ridge horizontal line

The first line of text after the horizontal line

The code for right aligned horizontal line

An example of a dashed horizontal line
<div align="center">
<div style="border-top: 2px dashed #C27BA0; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
</div>
The first line of text after the horizontal line

The visual result for the right aligned horizontal lines from Example #7 with color changed to #C27BA0:

An example of a dashed horizontal line

The first line of text after the horizontal line 

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line


An example of a ridge horizontal line

The first line of text after the horizontal line