Is it possible to make a gradient border?

Here is a possibility to create a gradient shadow border with CSS3:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    -ms-border-radius: 10px;
        border-radius: 10px;

border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
   -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
        box-shadow: inset 0 0 20px #000;

Practically this will create an inner shadow border with 10px radius at the edges.

Border with linear gradient.

HTML

<div id="input_parameters">
        ...Some HTML...
</div>

CSS

#input_parameters {
border: 10px solid transparent;

border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

border-image-slice: 1;
}

Nothing to do much just add following code:

 border-image: linear-gradient(to bottom, black 0%, white 100%);
  /* border-image-slice: 1;*/

just add above code to the element and border-image-slice property will set the inner offsets of the element.

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.