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

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