How to Make Separate Lines Vertical and Horizontal

  • by
Old-fashioned web designers might have known how to use the plain-old <hr /> to make separate lines horizontal to divide the page content like this:
<div>Paragraph 1</div>
<hr />
<div>Paragraph 2</div>

The output will be:
Paragraph 1

Paragraph 2

Or, you can style <hr /> as you want by CSS like this:
<div>Paragraph 1</div>
<hr style="border: 2px dashed blue; height: 10px; background-color: red; width: 80%;" />
<div>Paragraph 2</div>

The output will be:
Paragraph 1

Paragraph 2

Now, you have another options to make separation lines by styling any side of border without adding extra elements:
<div style="border-bottom: 1px solid gray;">Paragraph 1</div>
<div style="border-top: 1px solid white;">Paragraph 2</div>

The output will be:
Paragraph 1
Paragraph 2

Moreover, the trick can also make separate lines vertical:
<style>
div#separate_lines {color: white; background-color: black;}
span.menu {padding: 5px; border-right: 1px solid silver;}
</style>
<div id="separate_lines">
<span class="menu">Menu 1</span>
<span class="menu">Menu 2</span>
<span class="menu">Menu 3</span>
<span class="menu">Menu 4</span>
</div>

The output will be:
Menu 1 Menu 2 Menu 3 Menu 4

Leave a Reply

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