How to make a vertical line in HTML

How do you make a vertical line using HTML?

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>

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

<hr width="1" size="500">

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

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>

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" />

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>

HTML5 custom elements (or pure CSS)

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>

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.

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.

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>

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>

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>

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.

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.)

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/

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>
  

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

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.

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.

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.

Rotate a <hr> 90 degrees:

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

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;

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.

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;
        }

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

You can also use the HTML symbol | which renders as '|'

Simply use either of the UTF-8 Miscellaneous Symbols

|

|

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

Thanks me later.

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

position: absolute; 
left: 50%;