How to create a vertical divider or separator line in HTML CSS?

To create a vertical divider or seperator line in HTML, you have to use CSS border property. You have horizontal rule (<hr>) in HTML but there is no vertical rule or <vr> tag in HTML. And this is why we need to create it differently.

Let’s see how you can do that.

How to create a vertical separator line in HTML?

Vertical separator line between two paragraphs

For the above vertical separator line, I have the following CSS.

.vr {
  width: 1px;
  border-right: 2px solid #fc1f0a;
}

See the HTML that will make things more clear.

<div class="container">
  <div class="item">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit</p>
  </div>
  <span class="vr"></span>
  <div class="item">
    <p>Dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>

As you see in the above HTML, I have a <span> tag with a CSS class of “vr” and this is why I have this name in the CSS.

In my CSS, the “.vr” has 1 pixel width and 2 pixels border-right. But you can border-left as well and it will create the same look.

Example 2: Another way to create vertical divider

Vertical divider created using CSS position property and pseudo class — Veretical line created using CSS position property & pseudo class

You’re not limited to use the above HTML markup. And you don’t have to create a span tag in order to make a vertical line. Based on your HTML markup, you can assign a left or right border to an existing element. Such as div, section, etc.

For the above layout/screenshot, I have the following HTML markup.

<div class="container">
  <div class="item">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="item item-right">
    <p>Dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>

As you see in the above code, I don’t have an empty <span> tag or <div>. This is just a normal web page layout.

I used a pseudo class of (:before) and CSS position property. See my full CSS for the layout & line.

.container {
  background-color: #D4FFD1;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.container .item {
  flex-basis: 48%;
  background-color: #ffdcd9;
  padding: 10px;
}
.container .item-right::before {
  content: "";
  width: 1px;
  border-left: 2px solid #f57825;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
}

You don’t need the entire CSS to create the vertical line (as you see above). This is just to make you understand. Only the last selector creates the separator (and of course you need the position: relative).