Advertisement
Advertisement


How to make a vertical line in HTML


Question

How do you make a vertical line using HTML?

2016/10/17
1
341
10/17/2016 3:51:29 PM

Accepted Answer

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>

2017/01/05
552
1/5/2017 6:20:05 AM


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>

2018/07/12

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

2018/09/24

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>

2018/09/24

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.

2020/06/20

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.

2010/06/30

Source: https://stackoverflow.com/questions/3148415
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]