How to make a vertical line in HTML

The "making" of a vertical line

Using <div> element

A <div> paired with the right class say verticalLine, can surprise you with a neat vertical line:

<div class="verticalLine"></div>


.verticalLine {
  border-left: 2px solid #000;  /* Snowden approved, it's highly classified */
  height: 100px;  /* The sky - or your parent element - is your limit */
}


Turning <hr> sideways

You can teach an <hr> some new tricks by giving it a skinny width and the height as tall as an hr is wide, for an endearing makeshift vertical line:

<hr style="border: none; background-color: #000; width: 1px; height: 500px; margin: 0 auto;" />  /* Somewhere, an hr is blushing */


Center the star of your page with margin set to 0 auto.

Precise positioning with CSS

To micro-manage your vertical line's position, treat it to position: absolute or display: inline-block, giving it freedom from pesky document flow restrictions.

Tailoring with CSS

Outfit your vertical line in a width, height, and background-color fit for a red carpet. Embrace a height of 100% for a full-length vertical divider:

.verticalLine {
  width: 2px;
  height: 100%;  /* Serving full height realness */
  background-color: #000;
  position: absolute;  /* Like a wallflower at a party, it sticks to the side */
}


Reaching for compatibility stars

Remember cross-browser compatibility - it's your ticket to the web's big league. Base border styles are every browser's darling, but for the friskier CSS features, you have to tread carefully.

Boasting with ids

Flaunt a vertical line on a specific element by using the #id symbol as your backstage pass in your CSS.

Going extra

Who said vertical lines have to be plain? Channel your inner Picasso and play with 3D effects or gradients - remember to stay cross-browser chic!

Inline styles on the fly

If quick tests or email templates are your party tricks, inline styles are your secret weapon. Overpower existing styles with custom height for vertical lines.

Responsive vertical line: the sequel

Media queries for a perfect fit

Media queries are your fairy godmother, setting your vertical line's height, so it looks fabulous regardless of the screen size:

@media screen and (max-width: 600px) {
  .verticalLine {
    height: 50px;  /* Shrinks faster than my bank balance during a sale */
  }
}


Transforms for orientation revolution

If a sudden shift in orientation is in the script, award the transform CSS property a leading role:

.verticalLine {
  width: 0px;  /* Skinny legend */
  height: 100%;  /* Full height diva */
  transform: rotate(90deg);  /* Vertigo warning: frequent flips ahead */
}


Scaling with viewport units

Viewport units like vh pair compatibility and responsiveness for lines that scale as seamlessly as CGI creatures in your favorite films:

.verticalLine {
  width: 2px;  /* The vampire of widths: it doesn't reflect in mirrors */
  height: 100vh;  /* Why reach for the stars when you can reach for the viewport's top edge? */
}


Lights, camera, action! Practical tips to guide you

Avoiding outtakes

Beware of collapsing margins and beware those fighting z-index layers. Don't let overlapping borders be your blooper - plan your scene carefully!

For your eyes only

Ensure ideal contrast ratios for a visible line, catering to your entire audience, enveloping the visually impaired.

Smooth integration

A vertical line isn't an understudy - it should share the spotlight with the rest of your design. Test alignment with other elements for a seamless user experience.