[html] How to make a vertical line in HTML

How do you make a vertical line using HTML?

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

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

html, body{height: 100%;}_x000D_
_x000D_
hr.vertical {_x000D_
  width: 0px;_x000D_
  height: 100%;_x000D_
  /* or height in PX */_x000D_
}

<hr class="vertical" />

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

.divider{_x000D_
    margin-left: 5px;_x000D_
    margin-right: 5px;_x000D_
    height: 100px;_x000D_
    width: 1px;_x000D_
    background-color: red;_x000D_
}

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

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 {_x000D_
  width: 400px;_x000D_
}_x000D_
_x000D_
div.vertical-line {_x000D_
  border-left: 1px solid #808080;_x000D_
  height: 350px;_x000D_
  margin-left: auto;_x000D_
  margin-right: auto;_x000D_
  width: 1px;_x000D_
}

<div class="container">_x000D_
  <div class="vertical-line">&nbsp;</div>_x000D_
</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.

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;

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.

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.

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>

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

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.

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{_x000D_
      width: 1px; /* Line width */_x000D_
      background-color: black; /* Line color */_x000D_
      height: 100%; /* Override in-line if you want specific height. */_x000D_
      float: left; /* Causes the line to float to left of content. _x000D_
        You can instead use position:absolute or display:inline-block_x000D_
        if this fits better with your design */_x000D_
    }

<div class="vertical-line" style="height: 45px;"></div>

Style the border if you want 3D look:

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

   <div class="vertical-line" style="height: 45px;"></div>

You can of course also experiment with advanced combinations:

  div.vertical-line{_x000D_
      width: 1px;_x000D_
      background-color: silver;_x000D_
      height: 100%;_x000D_
      float: left;_x000D_
      border: 2px ridge silver ;_x000D_
      border-radius: 2px;_x000D_
    }

 <div class="vertical-line" style="height: 45px;"></div>

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

#verticle-line {_x000D_
  width: 1px;_x000D_
  min-height: 400px;_x000D_
  background: red;_x000D_
}

<div id="verticle-line"></div>

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.

Vertical line right to the div

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

Vertical line left to the div

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

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 {_x000D_
  border-left: 1px solid black;_x000D_
}

<div id="your_col">_x000D_
  Your content here_x000D_
</div>

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

position: absolute; 
left: 50%;

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.

Rotate a <hr> 90 degrees:

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

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

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