397

How do you make a vertical line using HTML?

1
  • 75
    Can't the W3 just be smarter and add a spec for <vr>
    – OverCoder
    Aug 22, 2016 at 20:49

26 Answers 26

593

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>

3
  • 3
    Combining style with content isn't taboo for many. <div style="border-left:thin solid #0000ff">I have nothing to say and I am saying it</div>
    – ctpenrose
    Apr 2, 2013 at 23:40
  • 20
    @ctpenrose It's indeed not taboo but separating them is handy as then you can easily adjust in one place if needed. Also putting it in a separate CSS file is better for performance as it can be cached by the browser and you end up transmitting less bytes over the wire each time you request the rendered HTML. Apr 3, 2013 at 15:28
  • 1
    that's one, but you almost always end up with something like: ul.page_cp > li:not(:first-child) { ...
    – papo
    Apr 2, 2021 at 5:28
276

You can use the horizontal rule tag to create vertical lines.

<hr width="1" size="500" style="0 auto" />

By using minimal width and large size, horizontal rule becomes a vertical one.

6
  • 12
    Bravo, sir. That is a cool trick. Still need to set it to display:inline-block otherwise it won't sit nicely next to other inline elements.
    – Alex W
    Jan 7, 2014 at 21:43
  • 2
    I don't think this works in Firefox, though. The line is there, but doesn't seem to be visible...
    – Edd
    Jan 21, 2014 at 12:16
  • 2
    Thanks for this code. Here is a working example jsfiddle of this jsfiddle.net/ccatto/c8RQc
    – Catto
    Jun 17, 2014 at 20:20
  • 1
    Giulio because it does not actually devide the screen into two columns. again you need to use some css staff for desired result, just like div. Nov 30, 2014 at 20:21
  • I like this better because it avoids the strangeness of having a hidden div with only one side of it having a visible border. Granted, it's not the way you normally use hr's but it still makes more sense to me.
    – levininja
    Oct 12, 2016 at 19:24
82

You can use an empty <div> that is styled exactly like you want the line to appear:

HTML:

<div class="vertical-line"></div>

With exact height (overriding style in-line):

  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }
<div class="vertical-line" style="height: 45px;"></div>

Style the border if you want 3D look:

    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }
   <div class="vertical-line" style="height: 45px;"></div>

You can of course also experiment with advanced combinations:

  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }
 <div class="vertical-line" style="height: 45px;"></div>

0
33

You can also make a vertical line using HTML horizontal line <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}
<hr class="vertical" />

2
  • 2
    Great trick to get line styled same as standard <hr>. Probably also need extra styling to float on side of content (example: float:left;)
    – awe
    Jul 30, 2013 at 9:00
  • This "vertical" rule still separates (text) elements vertically as normal horizontal rule.
    – Qwerty
    Nov 30, 2017 at 8:34
21

There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:

#your_col {
  border-left: 1px solid black;
}
<div id="your_col">
  Your content here
</div>

0
20

HTML5 custom elements (or pure CSS)

enter image description here

1. javascript

Register your element.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

*The - is mandatory in all custom elements.

2. css

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.

3. instantiate

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*Unfortunately you can't create custom self-closing tags.

usage

 <h1>THIS<v-r></v-r>WORKS</h1>

enter image description here

example: http://html5.qry.me/vertical-rule


Don't want to mess with javascript?

Simply apply this CSS class to your designated element.

css

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*See notes above.

3
  • Sad about the limitations, but this looks really, really useful in some other places.
    – Smar
    Jun 9, 2016 at 11:07
  • It do not fill all div size how to fix? Apr 27, 2017 at 19:30
  • 1
    @OtávioBarreto You may need to fiddle with the commented display property. Set it to either inline or inline-block. See the notes above and the example url.
    – Qwerty
    Apr 28, 2017 at 8:00
9

One other option is to use a 1-pixel image, and set the height - this option would allow you to float it to where you need to be.

Not the most elegant solution though.

0
9

You can draw a vertical line by simply using height / width with any html element.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}
<div id="verticle-line"></div>

6

There is a <hr> tag for horizontal line. It can be used with CSS to make horizontal line also:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}
<hr class="divider">

The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.

5

There isn't any tag to create a vertical line in HTML.

  1. Method: You load a line image. Then you set its style like "height: 100px ; width: 2px"

  2. Method: You can use <td> tags <td style="border-left: 1px solid red; padding: 5px;"> X </td>

5

To create a vertical line centered inside a div I think you can use this code. The 'container' may well be 100% width, I guess.

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}
<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

1
  • The Best Answear, all the others are Stuck in the left or the right. Thanks! Mar 1, 2019 at 9:16
5

Rotate a <hr> 90 degrees:

<hr style="width:100px; transform:rotate(90deg);">

4

You can use hr (horizontal line) tag and than rotate it 90 degree with css below

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

1
  • This will break any text or elements standing by.
    – Qwerty
    Dec 8, 2016 at 9:28
4

One more approach is possible : Using SVG.

eg :

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

Pros :

  • You can have line of any length and orientation.
  • You can specify the width, color easily

Cons :

  • SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don't support it.
4

I used a combination of the "hr" code suggested, and here's what my code looks like:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

I simply changed the value of the "left" pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)

4

Vertical line right to the div

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Vertical line left to the div

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

3

Why not use &#124, which is the html special character for |

1
  • 2
    Because it's not a vertical line
    – OverCoder
    Aug 22, 2016 at 20:47
2

If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.

  • > is a child selector. It matches any child of the element(s) specified on the left.
  • * is a universal selector. It matches an element of any type.
  • :not(:first-child) means it's not the first child of its parent.

Browser support: > * :first-child and :not()

I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.

Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.

2

To add a vertical line you need to style an hr.

Now when you make a vertical line it will appear in the middle of the page:

<hr style="width:0.5px;height:500px;"/>

Now to put it where you want you can use this code:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

This will position it to the left, you can inverse it to position it to the right.

1

In the Previous element after which you want to apply the vertical row , You can set CSS ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;
1

Simply use either of the UTF-8 Miscellaneous Symbols

&#124;

&#x7C;

That's all you need and its compatible with all browsers.

Thanks me later.

0

For an inline style I used this code:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

and that positioned it directly in the center.

0

I needed an inline vertical line, so I tricked a button into becoming a line.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }
0

I think it is a simple way not do to anything more You can change border left or right according to your need

.vertical-line{
border-left:1px solid #000

}
<span class="vertical-line"></span

0

You can also use the HTML symbol &#124; which renders as '|'

-1

To make the vertical line to center in the middle use:

position: absolute; 
left: 50%;
1
  • he asked how to make a vertical line, not how to make the vertical line to center in the middle
    – Bloodhound
    Sep 24, 2015 at 10:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.