Search code examples
cssbordergradient

Is it possible to make a gradient border?

As the title states, is it possible to make a gradient border in CSS3 and if so how? I know that you can make gradient backgrounds and there are many generators for that, but I am yet to find one that creates the code for a gradient border.

Solution

  • 1.

    Well.. this is no fancy css3 but heres one possible solution:

    I made this example for something else before and i just changed the background url of #childWrap

    http://jsfiddle.net/qD4zd/1/ ( note that the gradient isnt very flexible as it is done with images. )

    Basic idea is that if you have element that you want to frame with a border with a gradient, pattern or just image you should wrap that element inside another which you will use as the border.

    2.

    A little more flexible gradient: Another thing you might want to try is http://www.css3pie.com and use the gradient background in outer element to create a border like in my example jsfiddle.

    OR

    http://www.colorzilla.com/gradient-editor/

    ( http://jsfiddle.net/qD4zd/2/ )

    3.

    On a third note.. The first method could be made into more flexible one by using actual <img> tag so that you force the image to be specific height and width.. could even look decent.