Les bordures en CSS3

Il n'est peut-être plus la peine de vous présenter les avantages et nouveautés apportées par la troisième version du CSS (Cascading Style Sheets). L'un des grands pas dans ce langage est l'apparition de propriétés de mise en forme avancée des bordures.

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Nous verrons ici comment créer des bordures aux coins arrondis (border-radius), des bordures à partir d'image (border-image), des bordures aux couleurs dégradées (border-color) et enfin, des ombres portées aux boîtes (box-shadow). Et un petit bonus que je vous laisse découvrir par vous-même !

II. Il n'y a pas que les footballeurs qui réussissent leurs corners

II-A. Généralités

Jusqu'à présent pour réaliser des boîtes aux coins arrondis, nous devions utiliser une ou plusieurs images à appliquer en arrière-plan dans des <div> imbriqués ou des tableaux à neuf cellules. Nous passions plus de temps à découper nos éléments en un coin en haut à gauche, puis à droite, recoller les morceaux parce qu'on a donné un coup de ciseau de travers… Eh bien tout ceci est terminé ! Pour peu que le navigateur soit assez récent pour comprendre ce que nous allons lui demander. IE dans les versions précédentes à la neuf, ne prend pas en charge les propriétés qui suivent.

Avec le CSS3, il nous est possible de faire un angle arrondi via la propriété border-radius.

Voici sa syntaxe : <valeur>{1,4} / <valeur>{1,4}

Sa compatibilité : IE9+, Firefox 4+, Chrome, Safari 5+ et Opera 10.50+.

 
Sélectionnez
1.
2.
3.
.corner {
    border-radius: 5px;
}
 
Sélectionnez
1.
<div style="background-color: red; width: 150px; height: 150px; color: white;" class="corner">Ceci n'est pas un carton rouge !</div>

Image non disponible

Vous voyez, rien de plus simple. Ici, tous les coins ont le même arrondi.

Nous définissons une valeur pour le rayon du cercle décrivant la forme de l'arrondi. Voici un schéma d'illustration :

Image non disponible

Il est bien évidemment possible de spécifier des valeurs différentes pour chacun des coins de l'élément.

Pour rappel : la syntaxe de cette propriété nous permet de mettre de une à quatre valeurs qui peuvent être d'unités diverses (px, em, %) :
  • une valeur : pour les quatre côtés ;
  • deux valeurs : la première pour le haut et le bas, la seconde pour la gauche et la droite ;
  • trois valeurs : la première pour le haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
  • quatre valeurs : respectivement haut, droite, bas et gauche.
 
Sélectionnez
1.
2.
3.
4.
5.
6.
.corner {
    -moz-border-radius: 5px 0 50px 10px;
    -webkit-border-radius: 5px 0 50px 10px;
    -khtml-border-radius: 5px 0 50px 10px;
    border-radius: 5px 0 50px 10px;
}
 
Sélectionnez
1.
<div style="background-color: red; width: 200px; height: 100px;" class="corner"></div>

Image non disponible

Heu...m'sieur l'arbitre ! C'est qui -moz, -webkit et -khtml ?

Outre le fait que nous avons défini des arrondis plus ou moins importants sur les différents angles de notre div, vous avez pu remarquer que des « nouvelles » propriétés se sont invitées dans la partie.

Il s'agit de propriétés propriétaires spécifiques à chaque navigateur. Cela leur permet d'implémenter et de tester des propriétés qui ne sont pas encore recommandées par le W3C.

Les avis divergent sur leurs utilisations. Certains encouragent à les omettre prétextant une implémentation de border-radius largement répandue depuis quelques versions dans certains navigateurs, d'autres préfèrent les laisser pour assurer une compatibilité accrue. Dans la suite de ce tutoriel, je n'emploierai que la propriété sans préfixe pour des raisons de lisibilité.

II-B. En détail

Maintenant que nous avons vu comment faire des arrondis, nous allons voir que nous pouvons pousser le bouchon de Maurice un peu plus loin.

En effet, enfin… les effets de border-radius peuvent être étendus en mettant des couples de valeurs. Ces couples dont les valeurs sont séparées par un slash (/) permettent de définir les rayons horizontaux pour la première valeur et les rayons verticaux pour la deuxième. La différence ici est que ces deux rayons s'appliquent sur une ellipse et non plus un cercle. C'est pourquoi les formes peuvent être diverses et variées.

Un autre schéma d'illustration pour mieux comprendre :

Image non disponible

Reprenons notre exemple en appliquant une valeur pour l'horizontale et la verticale :

 
Sélectionnez
1.
2.
3.
.corner {
    border-radius: 10px 50px / 50px;
}
 
Sélectionnez
1.
<div style="background-color: red; width: 200px; height: 100px;" class="corner"></div>

Image non disponible

Dans le cas présent, les coins en haut à gauche et en bas à droite sont définis par une ellipse avec des rayons verticaux et horizontaux différents (respectivement 50px et 10px).

Comme c'est souvent le cas en CSS, cet attribut peut être détaillé. C'est-à-dire que l'on ne peut arrondir que certains angles en les précisant spécifiquement.

 
Sélectionnez
1.
2.
3.
4.
.corner {
    border-top-left-radius: 50px 10px;
    border-bottom-right-radius: 25px;
}
 
Sélectionnez
1.
<div style="background-color: red; width: 200px; height: 100px;" class="corner"></div>

Image non disponible

Vous l'aurez compris, seuls les angles en haut à gauche et en bas à droite sont paramétrés.

Voici les propriétés disponibles avec les équivalents pour les propriétés propriétaires au cas où vous deviez les utiliser.
Les standards sans préfixe (ce qui est le cas pour Opera) :
  • border-radius ;
  • border-top-left-radius ;
  • border-top-right-radius ;
  • border-bottom-right-radius ;
  • border-bottom-left-radius.

Safari et Chrome (pour ne citer qu'eux) :
  • -webkit-border-radius ;
  • -webkit-border-top-left-radius ;
  • -webkit-border-top-right-radius ;
  • -webkit-border-bottom-right-radius ;
  • -webkit-border-bottom-left-radius.

    Mozilla Firefox :
  • -moz-border-radius ;
  • -moz-border-radius-topleft ;
  • -moz-border-radius-topright ;
  • -moz-border-radius-bottomright ;
  • -moz-border-radius-bottomleft.

II-C. S'il te plaît, dessine-moi un mouton !

Voici quelques exemples d'utilisation de border-radius :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
#exemple div {
    background-color: gray;
    width:200px;
    height: 80px;
    float: left;
    margin-left: 30px;
    margin-top: 30px;
    line-height: 80px;
    text-align: center;
    font-size: 25px;
    color: white;
    font-weight: bold;
}
 
#demo1 {
    border-radius: 35px;
}
 
#demo2 {
    border-top-left-radius: 30px 15px;
}
 
#demo3 {
    border-bottom-left-radius: 25px 50px;
}
 
#demo4 {
    border-radius: 25px 10px / 10px 25px;
}
 
#demo5 {
    border-radius: 1em 4em 1em 4em;
}
 
#demo6 {
    border-top-left-radius: 50px;
}
 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
<div id="exemple">
    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div><p style="clear: both;"></p>
    <div id="demo4"></div>
    <div id="demo5"></div>
    <div id="demo6"></div>
</div>

Image non disponible

III. « L'image vaut mille mots. » - Confucius

Il est désormais possible de définir une image comme motif de bordure en lieu et place des traits dont nous disposions jusqu'à maintenant.

Notre image de référence :

Image non disponible

III-A. Une balise unique pour les gouverner toutes

Border-image regroupe une liste de propriétés que nous verrons brièvement ci-dessous. Pourquoi brièvement ? Parce qu'elles ne sont pas encore reconnues par les navigateurs, à l'exception donc, de border-image dont l'exemple complet sera donné à la fin de la présentation des propriétés qu'elle regroupe.

Les propriétés présentes dans le point A ne sont pas reconnues par nos navigateurs. Elles ne sont données qu'à titre d'exemple et d'explication pour la propriété raccourcie : border-image.

III-A-1. Border-image-source

Permet de définir l'URL de l'image à utiliser. On peut utiliser les mêmes types d'images que pour les images de fond, à savoir : les jpeg, gif, png, svg, les dégradés, des images codées en base64.

 
Sélectionnez
1.
2.
3.
.corner-image {
    border-image-source : url('fond.gif');
}

III-A-2. Border-image-slice

Permet de définir jusqu'à quatre longueurs indiquant la distance à partir de chaque coin de l'image afin de la couper.

Un petit schéma pour mieux comprendre :

Image non disponible

Nous avons découpé notre image en neuf parties :

  • 1, 3, 7 et 9 : ce sont nos quatre coins. Ils ne seront pas modifiés (ni étirés, ni répétés, ni même les deux) ;
  • 2, 4, 5, 6, 8 : ces parties-là seront étirées, répétés ou les deux. Tout dépend de vos attentes.

Ici, pour cet exemple, le CSS ressemblerait à :

 
Sélectionnez
1.
2.
3.
4.
.corner-image {
    border-image-slice: 26 26 26 26;
    border-image-slice: 26 /* En version raccourcie vu que les côtés sont tous de la même longueur */
}

L'image est découpée en neuf carrés de 26 pixels de côté.

III-A-3. Border-image-width

Permet de définir la largeur de la bordure. Elle est prioritaire sur border-width. Dans le cas où aucune n'est présente, la bordure sera celle par défaut de border-width.

Opera ne prend pas en charge border-image-width, il faudra donc utiliser border-width à la place.

 
Sélectionnez
1.
2.
3.
.corner-image {
    border-image-width: 26px;
}

III-A-4. Border-image-outset

La propriété border-image-outset indique de combien la zone de l'image peut s'étendre au-delà de la dimension de la bordure sur les quatre côtés.

 
Sélectionnez
1.
2.
3.
.corner-image {
    border-image-outset: 26;
}

III-A-5. Border-image-repeat

Permet de définir de quelle manière seront traités les bords en haut, à droite, en bas et à gauche de l'image. Cela ne concerne pas les angles, bien évidemment puisqu'eux ne sont pas répétés. Il est possible de définir une ou deux valeurs, la première s'appliquant pour le haut et le bas, tandis que la deuxième sera pour la droite et la gauche. Si une seule est fournie elle s'applique sur les quatre côtés.

Les valeurs disponibles sont :

  • stretch : étire l'image sur toute la longueur à couvrir ;
  • repeat : comme pour background, l'image sera répétée pour couvrir tout l'espace nécessaire ;
  • round : comme repeat, à la différence que cette fois, l'échelle de l'image sera conservée afin de ne plus avoir de coupure.

Le code ci-dessous montre leur mise en application.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
.corner-image-1 {
    border-image-repeat: stretch stretch;
}
 
.corner-image-2 {
    border-image-repeat: repeat repeat;
}
 
.corner-image-3 {
    border-image-repeat: round round;
}

Image non disponible

III-B. Enfin ! La voilà ! Border-image !

Alors pour faire court, vous prenez tout ce qu'on a fait précédemment et vous les mettez à la suite. Dans l'ordre énoncé.

Voici la syntaxe de border-image :<source> <slice {1,4}> / <width {1,4}> / <outset> <repeat{1,2}>

Sa compatibilité : Firefox avec le préfixe -moz, Opera avec le préfixe -o, Safari avec le préfixe -webkit. Internet Explorer ne prend pas encore en charge cette propriété. Chrome quant à lui supporte cette propriété.

Exemple :

 
Sélectionnez
1.
2.
3.
4.
.corner-image {
    border-width: 26px; /* Fix pour Opera */
    border-image: url('fond.gif') 26 / 26px round;
}

Qui est la version abrégée de :

 
Sélectionnez
1.
2.
3.
4.
.corner-image {
    border-width: 26px; /* Fix pour Opera */
    border-image: url('fond.gif') 26 26 26 26 / 26px 26px 26px 26px round; /* Je vous rappelle que les quatre côtés sont égaux donc pas besoin de répéter leurs valeurs */
}

Image non disponible

Nous avons donc une bordure constituée d'une image dont les parties du milieu sont répétées sans coupures (round).

IV. Sortez vos feutres, c'est atelier coloriage

Grâce à la version trois de CSS, il est possible d'avoir des dégradés de couleurs dans nos bordures. Actuellement, seul Firefox a implémenté la gestion du dégradé. L'utilisation du préfixe -moz est donc obligatoire.

Voici la syntaxe de -moz-border-colors : [ <color> || transparent ]+

La compatibilité de border-colors : Firefox 3.0+

Un exemple d'utilisation :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
.color-border-1 {
    border: 6px solid black;
    -moz-border-bottom-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
    -moz-border-top-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
    -moz-border-left-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
    -moz-border-right-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
}
 
Sélectionnez
<div style="background-color: red; width: 200px; height: 100px;" class="color-border-1"></div>

Image non disponible

On déclare une couleur par pixel. Donc si on a une bordure de six pixels, on déclare six couleurs.

V. L'ombre c'est pas qu'avec les parasols ?

La dernière (ou pas…) propriété que nous verrons aujourd'hui est box-shadow. Avec cette dernière, il vous est possible d'ajouter une ombre interne ou externe sur un élément HTML de type bloc. Pour le texte il faudra utiliser text-shadow qui est prévu à cet effet.

Voici la syntaxe de box-shadow : none | <shadow> [ , <shadow> ]*

avec : <shadow> = inset? && [ <length>{2,4} && <color>? ]

Sa compatibilité : IE 9+, Firefox 4+, Safari 4+, Opera 10.5+, Chrome 10+


Un petit peu d'explications ne serait pas du luxe :

  • une valeur positive pour le décalage horizontal déplace l'ombre vers la droite, une valeur négative vers la gauche ;
  • une valeur positive pour le décalage vertical déplace l'ombre vers le bas, une valeur négative vers le haut ;
  • vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou s'étale ;
  • une distance de propagation positive entraîne une expansion de la zone d'ombre dans toutes les directions, une valeur négative entraîne une contraction ;
    la couleur est celle de l'ombre ;
  • la valeur inset indique une ombre interne plutôt qu'externe.

Je vous assure que cela va être plus clair avec un exemple, que voici d'ailleurs :

 
Sélectionnez
1.
2.
3.
.shadow {
    box-shadow: 2px 2px 4px black;
}
 
Sélectionnez
1.
<div style="background-color: yellow; width: 200px; height: 100px;" class="shadow"></div>

Image non disponible

Ici, notre ombre est décalée de deux pixels horizontalement et verticalement avec un flou de quatre pixels, le tout de couleur noire.

Là, même chose avec des valeurs légèrement différentes :

 
Sélectionnez
1.
2.
3.
.shadow {
    box-shadow: 20px 20px black;
}
 
Sélectionnez
1.
<div style="background-color: yellow; width: 200px; height: 100px;" class="shadow"></div>

Image non disponible

Vous comprenez maintenant comment donner plus de dimension à vos boîtes ?

Un autre exemple mais avec une ombre interne :

 
Sélectionnez
1.
2.
3.
.shadow {
    box-shadow: inset 0 0 5px 5px #888;
}
 
Sélectionnez
1.
<div style="background-color: yellow; width: 200px; height: 100px;" class="shadow"></div>

Image non disponible

Je crois que vous avez compris le principe maintenant.

Voici d'autres exemples d'utilisation :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
#exemple div {
    width:200px;
    height: 80px;
    float: left;
    line-height: 80px;
    text-align: center;
    font-size: 25px;
    color: black;
    font-weight: bold;
}
 
#demo1 {
    background-color: yellow;
    box-shadow: -5px -5px 5px #888;
    margin-left: 30px;
    margin-top: 30px;
}
 
#demo2 {
    background-color: yellow;
    box-shadow: -5px -5px 0 5px #888; /* On propage la zone d'ombre de 5px */
    margin-left: 30px;
    margin-top: 30px;
}
 
#demo3 {
    background-color: yellow;
    box-shadow: 0 0 5px #888;
    margin-left: 30px;
    margin-top: 30px;
}
 
#demo4 {
    background-color: yellow;
    box-shadow: 0 0 5px 5px #888;
    margin-left: 30px;
    margin-top: 30px;
    border-radius: 10px;
}
 
#demo5 {
    background-color: white;
    border: 1px solid black;
    border-radius: 20px;
    margin: 100px;
    box-shadow: 40px 30px 50px red, -40px -30px 50px blue, 40px -30px 50px yellow, -40px 30px green;
}
 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
<div id="exemple">
    <div id="demo1">1</div>
    <div id="demo2">2</div>
    <div id="demo3">3</div><p style="clear: both;"></p>
    <div id="demo4">4</div>
    <div id="demo5">5</div>
</div>

Image non disponible

Petit exemple, juste comme ça, avec tout ce qui a été vu jusqu'à maintenant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
#demo6 {
    background-color: yellow;
    box-shadow: 5px 5px 5px #888;
    margin-left: 30px;
    margin-top: 30px;
    border-radius: 1em 4em 1em 4em;
    border: 6px solid black;
    -moz-border-bottom-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
    -moz-border-top-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
    -moz-border-left-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
    -moz-border-right-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
}

Image non disponible

On peut vraiment faire des choses intéressantes avec CSS3.

VI. Bonus

Allez, une dernière propriété pour la route et après je vous laisse avec « Conclusion et remerciements », ils sont sympa vous verrez ;)

Je n'en ai pas parlé jusqu'à présent mais CSS3 offre une énième façon de déclarer une couleur pour un élément : le RGBA.

Ce n'est ni plus ni moins que le système RGB traditionnel complété du canal Alpha, qui permet de jouer avec l'opacité, la transparence d'une couleur. Et ça, c'est intéressant !

Par exemple : définissons une div bleue et une deuxième, également bleue, mais avec une transparence de 50 %.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
body {
    background: gray;
}
article {
    background: rgb(255, 0, 0);
    width: 200px;
    height: 100px;
    position: relative;
}
.rgba-1 {
    width: 75px;
    height: 75px;
    background: rgba(0, 0, 255, 1);
    position: absolute;
}
 
.rgba-2 {
    width: 75px;
    height: 150px;
    background: rgba(0, 0, 255, 0.5);
    position: absolute;
    left: 75px;
}
 
Sélectionnez
1.
2.
3.
4.
5.
<article>
    <div class="rgba-1"></div>
    <div class="rgba-2"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
</article>

Image non disponible

Vous remarquez que la deuxième div semble d'une couleur différente pourtant elle est juste transparente.

Les valeurs de la couche Alpha varient de 0 à 1, de la plus claire à la plus foncée.

Attention, le système RGBA n'est pas à confondre avec la propriété opacity. Elles n'ont pas les mêmes utilisations. Opacity rend l'élément entier transparent, contenu compris, alors que RGBA ne s'applique qu'aux couleurs.

Observez la différence :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
.rgba {
    background: rgba(0, 125, 0, 0.5);
}
 
.opacity {
    background: rgb(0, 125, 0);
    opacity: 0.5;
}
 
Sélectionnez
1.
2.
<div style="width: 200px; height: 20px; line-height: 20px;" class="rgba">Ceci est un texte avec RGBA</div>
<div style="width: 200px; height: 20px; line-height: 20px;" class="opacity">Ceci est un texte avec Opacity</div>

Image non disponible

On voit ici que dans le cas d'opacity, le texte est également mis en transparence.

VII. Conclusion et remerciements

Voilà, c'est tout pour l'instant. J'espère que ce petit article vous aura plu et que je vous retrouverai dans la suite des aventures du CSS3.

Je tiens à remercier ericd69, Candygirl, zoom61 et 12monkeys pour leur relecture technique et FirePrawn et ClaudeLELOUP pour leur relecture orthographique. Je remercie également toute l'équipe de Developpez.com pour leurs outils de rédaction magnifiques.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.