CODEWITHSUNDEEP
htmlcss
Gopal
Gopal

Reputation: 11982

How to make a vertical line in HTML

How do you make a vertical line using HTML?

Upvotes: 410

Views: 1278960

Answers (26)

Anthony
Anthony

Reputation: 2811

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.

Upvotes: 281

Chidi-Nwaneto
Chidi-Nwaneto

Reputation: 654

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.

Upvotes: 1

Aurovrata
Aurovrata

Reputation: 2279

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

Upvotes: 0

Sancode
Sancode

Reputation: 35

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

Upvotes: 0

Muminur Rahman
Muminur Rahman

Reputation: 634

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.

Upvotes: 7

Nikki
Nikki

Reputation: 41

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

Upvotes: 0

MeKoo Solutions
MeKoo Solutions

Reputation: 301

Rotate a <hr> 90 degrees:

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

Upvotes: 8

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

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>

Upvotes: 9

Ishan Jain
Ishan Jain

Reputation: 8171

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

Upvotes: 33

Daniel Vassallo
Daniel Vassallo

Reputation: 344311

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>

Upvotes: 21

Edd
Edd

Reputation: 1032

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>

Upvotes: 5

Qwerty
Qwerty

Reputation: 31949

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.

Upvotes: 20

awe
awe

Reputation: 22442

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>

Upvotes: 87

pvrforpranavvr
pvrforpranavvr

Reputation: 2938

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>

Upvotes: 4

Peter Georges Bou Saada
Peter Georges Bou Saada

Reputation: 88

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.

Upvotes: 2

Guy
Guy

Reputation: 41

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

Upvotes: 4

Kris van der Mast
Kris van der Mast

Reputation: 16613

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>

Upvotes: 609

James-Jesse Drinkard
James-Jesse Drinkard

Reputation: 15703

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.

Upvotes: 0

Abhishek Mathur
Abhishek Mathur

Reputation: 480

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;

Upvotes: 1

Sachin
Sachin

Reputation: 3540

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.

Upvotes: 5

S. Kirby
S. Kirby

Reputation: 7205

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.

Upvotes: 2

Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

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/

Upvotes: 4

Lance Caraccioli
Lance Caraccioli

Reputation: 1429

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

Upvotes: 2

andrzeij
andrzeij

Reputation: 237

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

position: absolute; 
left: 50%;

Upvotes: -1

chris
chris

Reputation: 37460

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.

Upvotes: 9

onurbaysan
onurbaysan

Reputation: 1258

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>

Upvotes: 5

Related Questions