give top border two colors

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 ?

No, there is no way, unless you split the div into two equal divs — Andy, Aug 10 '12 at 11:00
possible duplicate of [CSS: two color borders](http://stackoverflow.com/questions/3906983/css-two-color-borders) — Zoltan Toth, Aug 10 '12 at 11:08
Just to make sure: Do you want to split the border horizontally (two 1px lines on top of each other) or vertically (left half one color, right half another)? — RoToRa, Aug 10 '12 at 11:08

score 8 · Answer 1 · answered Aug 10 '12 at 11:57

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: '';
}

score 2 · Accepted Answer · answered Aug 10 '12 at 11:02

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;
}

answered Aug 10 '12 at 11:02

Bakabaka

1,505
1
13
21

score 0 · Answer 3 · answered Aug 10 '12 at 11:28

0

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

answered Aug 10 '12 at 11:28

Alexander Wigmore

3,157
4
38
60

1

u have cut it horizontaly , what i want is to cut it vertically , like if it was 2 cells – Roland Aug 10 '12 at 11:33
Then instead of border-top, you could use `border-left` or `border-right`? – Alexander Wigmore Aug 10 '12 at 11:43
Just re-read your comment, and think I mis-understood, created another way of doing it, so the split is down y-axis. [jsFiddle](http://jsfiddle.net/wigster/SuFgj/) - May Look confusing in the CSS, but that's just all vendor prefix's so that it'll look the same in most browsers. – Alexander Wigmore Aug 10 '12 at 11:59

give top border two colors

3 Answers3