Gradient border

Here I’ve done some kind of border with gradient, maybe it would be useful for someone http://jsfiddle.net/okhomenko/HdaRE/6/

Gradient border

Code is pretty simple - we create box, put background-images on it and crop its with background-size. Also we should set bakground-repeat: no-repeat.

#bordergradient {
    background-image:
        -moz-linear-gradient(left   top, red,     #7BCBEF),
        -moz-linear-gradient(center top, blue,    #7BCBEF),
        -moz-linear-gradient(right  top, green,   #7BCBEF),
        -moz-linear-gradient(center top, #7BCBEF, rgba(123, 203, 239, 0));

    background-size:
        100% 1px,
        3px 100%,
        100% 2px,
        5px 100%;
        
    background-position:
        left top,
        right top,
        left bottom,
        left top;

    background-repeat:
        no-repeat;
}

I used this technique like this

Gradient border

Tags: gradient border css3