Sto cercando di applicare una sfumatura a un bordo, ho pensato che fosse semplice come fare questo:

border-color: -moz-linear-gradient(top, #555555, #111111);

Ma questo non funziona.

Qualcuno sa qual è il modo corretto di fare i gradienti ai bordi?

WebKit ora (e almeno Chrome 12) supporta i gradienti come immagine di bordo:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink - http://www.webkit.org/blog/1424/css3-gradients/
Supporto browser: http://caniuse.com/#search=border-image

invece dei bordi, utilizzerei i gradienti di sfondo e il riempimento. stesso aspetto, ma molto più semplice, più supportato.

un semplice esempio:

.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.g > div { background: #fff; }

<div class="g">
	<div>bla</div>
</div>

EDIT: puoi anche sfruttare il :beforeselettore come ha sottolineato @WalterSchwarz:

body {
    padding: 20px;
}
.circle {
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
    border-radius: 100%;
    position: relative;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
.circle::before {
    border-radius: 100%;
    content: '';
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    padding: 10px;
    width: 100%;
    height:100%;
    top: -10px;
    left: -10px;
    position:absolute;
    z-index:-1;
}

<div class="circle">Test</div>

border-image-slice estenderà un gradiente CSS per bordi

Questo (per quanto ho capito) impedisce il troncamento predefinito dell '"immagine" in sezioni - senza di essa, nulla appare se il bordo è solo su un lato e se è attorno all'intero elemento compaiono quattro minuscoli gradienti in ogni angolo.

  border-bottom: 6px solid transparent;
  border-image: linear-gradient(to right, red , yellow);
  border-image-slice: 1;

Mozilla attualmente supporta solo i gradienti CSS come valori della proprietà dell'immagine di sfondo, nonché all'interno dello sfondo di stenografia.

- https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

- http://www.cssportal.com/css3-preview/borders.htm

Prova questo, funziona bene sul web-kit

.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

<div class="border">Hello!</div>

È un trucco, ma puoi ottenere questo effetto in alcuni casi usando l'immagine di sfondo per specificare il gradiente e quindi mascherando lo sfondo reale con un'ombra a forma di scatola. Per esempio:

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

Da: http://blog.nateps.com/the-elusive-css-border-gradient

Prova questo, ha funzionato per me.

div{
  border-radius: 20px;
  height: 70vh;
  overflow: hidden;
}

div::before{
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}

<div></div>

Il link è al violino https://jsfiddle.net/yash009/kayjqve3/1/ spero che questo aiuti

Sono d'accordo con szajmon. L'unico problema con le risposte di lui e Quentin è la compatibilità tra browser.

HTML:

<div class="g">
    <div>bla</div>
</div>

CSS:

.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}

.g > div { background: #fff; }

Webkit supporta sfumature nei bordi e ora accetta il gradiente nel formato Mozilla.

Firefox afferma di supportare i gradienti in due modi:

1. Utilizzo di border-image con border-image-source
2. Uso dei colori bordo-destra (destra / sinistra / alto / basso)

IE9 non ha supporto.

Prova l'esempio seguente:

.border-gradient {
      border-width: 5px 5px 5px 5px;
      border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
      border-image-slice: 9;
      border-style: solid;
}

Un altro trucco per ottenere lo stesso effetto è l'utilizzo di più immagini di sfondo, una funzionalità supportata in IE9 +, Firefox nuovo e la maggior parte dei browser basati su WebKit: http://caniuse.com/#feat=multibackgrounds

Ci sono anche alcune opzioni per l'utilizzo di più sfondi in IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

Ad esempio, supponiamo di voler un bordo sinistro largo 5 pixel che sia un gradiente lineare dal blu al bianco. Crea il gradiente come immagine ed esporta in un PNG. Elenca eventuali altri sfondi CSS dopo quello per il gradiente del bordo sinistro:

#la scatola {
    sfondo:
        url (/images/theBox-leftBorderGradient.png) non ha ripetuto,
        ...;
}

È possibile adattare questa tecnica ai gradienti del bordo superiore, destro e inferiore modificando la parte della posizione di sfondo della backgroundproprietà della scorciatoia.

Ecco un jsFiddle per l'esempio dato: http://jsfiddle.net/jLnDt/

Bordi sfumati da Css-Tricks: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

Per il supporto cross-browser puoi provare a imitare un bordo sfumato con :beforeo :afterpseudo elementi, dipende da cosa vuoi fare.

Esempio di bordo sfumato

Utilizzo della proprietà css di border-image

Crediti: border-image in Mozilla

.grad-border {
  height: 1px;
  width: 85%;
  margin: 0 auto;
  display: flex;
}
.left-border, .right-border {
  width: 50%;
  border-bottom: 2px solid #695f52;
  display: inline-block;
}
.left-border {
  border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
  border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}

<div class="grad-border">
  <div class="left-border"></div>
  <div class="right-border"></div>
</div>

prova questo codice

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

o forse fare riferimento a questo violino: http://jsfiddle.net/necolas/vqnk9/

Ecco un bel modo semi-browser per avere bordi sfumati che si sbiadiscono a metà. Semplicemente impostando il color-stop surgba(0, 0, 0, 0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

Utilizzo spiegato:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops  

Altro qui: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

C'è un bell'articolo sui trucchi CSS su questo qui: https://css-tricks.com/gradient-borders-in-css/

Sono stato in grado di trovare una soluzione abbastanza semplice, a singolo elemento, a questa soluzione utilizzando più sfondi e la proprietà origine-sfondo.

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

Le cose belle di questo approccio sono:

1. Non è influenzato da z-index
2. Può ridimensionare facilmente semplicemente modificando la larghezza del bordo trasparente

Dai un'occhiata: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100