CSS - Short border line?

Issue

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.

Solution

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

Answered By - SW4