CSS - Short border line?

Question

I have a border on a couple of DIVs that is only on the left side.

CSS:

#Mid-Content_ {

    position: absolute;
    left: 510px;
    top: 119px;
    height: 70%;
    border-left: #CCC 2px solid;
    width: 250px;
    padding-left: 10px;
}

The border goes from the top to the bottom of the left side which is exactly what it should do according to the CSS code.

Is there a way to make it shorter, say 10px from the top and bottom? The problem is that the text inside the DIV needs to be inline with this border line.

Answer 1

Have a look at this fiddle

HTML

<div id="contentArea">
         <div id="border"></div>
         text text text text text text text text text text
</div>

CSS

   #contentArea {
     height: 100px;
     width: 80px;
     position: relative;
     background: #3beadc;
     padding:5px;
     }

   #border  {
     border-left: 2px solid #f51c40;
     position: absolute;
     top: 10px;
     bottom: 10px
     left:0px;
   }

If you want the border to be outside the contentArea, change its left value to negative*border width* e.g. left:-2px; in the case above