How do you make a vertical line using HTML?

26 Answers

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

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

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

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.

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

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

<hr/> 

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

Vertical line right to the div

 <div> <div> <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> <div> <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 &#124, 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" /> 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/> 

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

<hr/> 

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

Rotate a <hr> 90 degrees:

<hr>

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

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