Top and bottom clashing with left and right borders

I'd like my navigation bar to have an outer border that is a different color and width from the separators inside. I could do this by have a wrapper div but I'm trying to keep those to a minimum. So right now I have six nav buttons that look like so:



It lines up just the way it should and looks perfect but the gray border-lefts and border-rights hit the blue border-tops and border-bottoms and create a weird effect where they seem to split about 10 pixels between them. Any one know how I can make it so the blue border dominates over the gray?

The only solutions that I'm aware of to avoid the way border corners work is to apply borders to two different elements or to find some other way of achieving the look of a border. Perhaps you could fake some of the borders by using CSS3 linear gradients (which won't work in IE versions before 10 in this case).