CSS Vertical Separate Lines

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:

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:

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 #9A9A9A;" >Paragraph 1</div>
<div style="border-top: 1px solid #EEEEEE;" >Paragraph 2</div>

The output will be:

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: