CSS3 Bordure dégradé

Hello,

Petite question : est-il possible de styler une bordure gauche (ou droite) dégradée du haut vers le bas (c'est à dire un dégradé horizontale d'une bordure verticale )
Cela me servirait à faire une séparation entre plusieurs blocs horizontaux sans mettre d'image.
Me suis-je bien fait comprendre?

Merci à tous

Hello,

A l'heure qu'il est, les dégradés en css3 sont uniquement possible sur les background.

Si tu ne veux pas utiliser d'image, la seule solution que je vois (il y en a surement d'autres), c'est utiliser du contenu généré avec quelque chose du genre

div {
    position: relative;
}

div:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    top: 0;
    left: -20px;

    background: -moz-linear-gradient(top, #f00 0%, #00f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f00), color-stop(100%,#00f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f00 0%,#00f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f00 0%,#00f 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #f00 0%,#00f 100%); /* IE10+ */
    background: linear-gradient(top, #f00 0%,#00f 100%); /* W3C */
}

mais ça ne fonctionne pas sous IE (les bons vieux filter biens sales ne passent pas sur le contenu généré).

C'est vraiment pas terrible (en plus d'être moche, mais ça vient surement de mes grandes qualités de designer ).

Florian_R a écrit :
Hello,

A l'heure qu'il est, les dégradés en css3 sont uniquement possible sur les background.

Si tu ne veux pas utiliser d'image, la seule solution que je vois (il y en a surement d'autres), c'est utiliser du contenu généré avec quelque chose du genre

div {
    position: relative;
}

div:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10px;
    top: 0;
    left: -20px;

    background: -moz-linear-gradient(top, #f00 0%, #00f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f00), color-stop(100%,#00f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f00 0%,#00f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f00 0%,#00f 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #f00 0%,#00f 100%); /* IE10+ */
    background: linear-gradient(top, #f00 0%,#00f 100%); /* W3C */
}

mais ça ne fonctionne pas sous IE (les bons vieux filter biens sales ne passent pas sur le contenu généré).

C'est vraiment pas terrible (en plus d'être moche, mais ça vient surement de mes grandes qualités de designer ).

C'était ma solution de dépannage, mettre un élément en position absolute entre chaque bloc. Mais bon c'est un peu sale. J'ai fait pas mal de recherche et en effet j'en demande un peu trop je pense . Je vais opter pour l'image, ça sera plus propre...

Merci quand même

Hello!
Je me goure peut-être, mais peut-être de styler une élément hr pourrait fonctionner... à essayer!

Salut,

Si tu veux utiliser à la fois une image et CSS 3, tu as les propriétés border-image et consorts (un exemple peut-être plus parlant que les specs du W3C), avec, toutefois, un support variable sous Firefox 3.5+, Safari, Chrome et Opera 10.5+ et un support inexistant sous IE (y compris la version 9).

@ Julie, merci mais il me fallait une barre Verticale
@Victor, merci mais dans mon cas, l'image suffit

Merci à tous