border-bottom running over border-left

Question

I want to but a border-left (5px solid blue) on a div that already has a border-top and bottom (1px solid grey). I want the border-left to be over the border-top and border-bottom but the browser renders it like this :

The only solution I have found so far is to wrap it in another div and put the left-border on this one instead, but I don't really like it.

If anyone has a better solution...

---

@Nick here how I see it on my browser :

and here is how I want it :

Answer 1

There are probably a couple different ways to do this. You could experiment with using a new pseudo element to generate the border where you want.

But I think I'd probably go with using the box-shadow property. Take a look at my fiddle, which has exaggerated colors and sizes for clarity:

http://jsfiddle.net/5hJdA/

I've used an inset box-shadow with a 0 blur radius and 0 spread. I've also added a padding value to the left to for the content to clear the width of the left "border". Since the box-shadow is inset, its effect will be rendered inside the border boundaries of the element.

Posting code here because SO requires it (lame):

element {
    box-shadow: 25px 0 0 0 blue inset;
}