I want a thin transparent div line separator. How to do this in CSS / html?

Question

Basically, I need a line similar to the one that separates the messages in stackoverflow, only I want it to be vertical and be a kind of “left border” that will be in a separate div for displaying links and content. So instead of making a big rectangle on the left side with links and text, I just want to actually have a thin, thin gray line that goes all the way down the page.

How can I do it?

Answer 1

You can do

.some-class
{
    border-left:1px solid #e2e2e2;
}

Answer 2

.thin_border {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
}
#mydiv {
    height: 100%;
}

This will be a translucent frame to the left of the item.

.

HTML:

<div id="mydiv" class="thin_border">
content
</div>

Answer 3

, :

HTML

<div class="vertical-line"></div>

CSS

.vertical-line {
   width: 1px;
   height: 300px;
   background-color: #696969;
   margin: 0 auto;
}

You can then adjust the color, attributes, and height of this vertical line by changing this attribute .vertical-line.

Answer 4

Check in CSS of this page I could see that this is used by CSS:

border-bottom: 1px solid #cccccc;

You can do something like this:

border-right: 1px solid #cccccc,
widht: 1px;
height: //depends on how tall you want it