au lieu des bordures, j'utiliserais des gradients de fond et du rembourrage. même apparence, mais beaucoup plus facile, plus soutenu.

un exemple simple:

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

CSS:

.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; }

JsFiddle

éditer: Vous pouvez également utiliser le sélecteur :before comme @WalterSchwarz a souligné dans ce jsFiddle

Mozilla ne supporte actuellement que les gradients CSS comme valeurs de la propriété background-image, ainsi que dans l'arrière-plan shorthand.

- 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

border-image-slice permettra de prolonger la CSS border-image gradient

ceci (tel que je le comprends) empêche le découpage par défaut de l '"image" en sections - sans lui, rien n'apparaît si la bordure est d'un seul côté, et si c'est autour de l'élément entier quatre petits gradients apparaissent dans chaque coin.

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

Essayer cela, fonctionne très bien sur le web kit

http://jsfiddle.net/284sa /

.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>

C'est un hack, mais vous pouvez obtenir cet effet dans certains cas en utilisant l'image d'arrière-plan pour spécifier le gradient et masquer ensuite l'arrière-plan réel avec un box-shadow. Par exemple:

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 */
}

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

je suis d'accord avec szajmon. Le seul problème avec ses réponses et celles de Quentin est la compatibilité entre les navigateurs.

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 supporte les gradients dans les bordures , et accepte maintenant le gradient dans le format Mozilla.

Firefox prétend supporter des gradients de deux façons:

1. à l'Aide de la frontière de l'image avec border-image-source
2. utilisant les couleurs border-right (right/left/top/bottom)

IE9 n'a pas de support.

un autre hack pour atteindre le même effet est d'utiliser plusieurs images d'arrière-plan, une fonctionnalité qui est prise en charge dans IE9+, newish Firefox, et la plupart des navigateurs WebKit-basés: http://caniuse.com/#feat=multibackgrounds

il y a aussi des options pour l'utilisation de plusieurs arrière-plans dans IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers /

par exemple, supposons que vous voulez un bord gauche large de 5px qui est un gradient linéaire du bleu au blanc. Créez le gradient comme une image et exportez vers un PNG. Liste de toutes les autres CSS origines après l'un pour la bordure gauche de gradient:

#theBox {
    background:
        url(/images/theBox-leftBorderGradient.png) left no-repeat,
        ...;
}

vous pouvez adapter cette technique aux gradients supérieurs, droits et inférieurs des bordures en changeant la partie de la position de fond de la propriété background .

voici un jsFiddle pour le donné exemple: http://jsfiddle.net/jLnDt /

frontières de Gradient de Css-trucs: 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; 
}

pour le soutien de navigateur croisé, vous pouvez essayer aussi bien imiter une bordure de gradient avec :before ou :after pseudo éléments, dépend de ce que vous voulez faire.

essayez ce code

.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%); 
}

ou peut-être se référer à ce violon: http://jsfiddle.net/necolas/vqnk9 /

voici une belle façon semi-cross-browser pour avoir des bordures de gradient qui s'estompent à mi-chemin. Simplement en réglant le "color-stop à rgba(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>

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

plus ici: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient