Question

Can I specify a border like 1px solid color1/color2. for the situation if I have to put a border like the image attached. I know I can put this border as an image, but I am looking if this can be be done in pure css.

Answer 1

You can also achieve the effect of multiple borders on an element with the pseude elements :before and :after.
See this page for examples http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

Here is ja demo using this technice (only top border as you described it): http://jsfiddle.net/m7g6L/

div {
    border-top: 3px solid #00f;
    position: relative;
    z-index: 10;
    margin: 10px;
    width: 200px;
}

div:before {
    content: "";
    border-top: 1px solid #f00;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    z-index: -1;
}