give top border two colors - html

Question

I have this:
<style type="text/css">
.TopBorderPanel {
position: relative;
overflow: hidden;
border-top: 2px solid #bbbb9f;
margin: 1px;
width: 500px;
}
</style>
The top border has one color , #bbbb9f, what i want to do is make it 2 colors
50% #bbbb9f and 50% #cccccc
Is it possible ?

Answer 1

http://jsfiddle.net/CdWCA/
.TopBorderPanel {
border-top: 2px solid #bbbb9f;
position: relative;
}
.TopBorderPanel:after {
position: absolute;
left: 50%;
right: 0;
top: -2px;
border-top: 2px solid #cccccc;
content: '';
}
​

Answer 2

Better use a background *.gif split equally into two colours, and use a single pixel of padding on the top:
.TopBorderPanel {
border: 0;
background-image: url(...);
padding-top: 1px;
}

Answer 3

I can think of 2 ways of doing this.
My first method would be to use a pseudo selector, what this does is add content, or styles :before or :after an element. So in effect you can have 2 styles for one element, just one as normal, and then some extras added either before or after this element.
I have added a border-top, as normal, and then added another border-top with the pseudo selector.
My second solution is to add a box-shadow, that instead of normally looking like a diffused shadow, it styled to look like a solid shadow above the element.
I've created a jsFiddle which will hopefully give you an idea, but if you don't understand just say.
jsFiddle