Les bordures en CSS3

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

.corner {
    border-radius: 5px;
}

<div style="background-color: red; width: 150px; height: 150px; color: white;" class="corner">Ceci n'est pas un carton rouge !</div>

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 :

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

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

<div style="background-color: red; width: 200px; height: 100px;" class="corner"></div>

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

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 :

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

.corner {
    border-radius: 10px 50px / 50px;
}

<div style="background-color: red; width: 200px; height: 100px;" class="corner"></div>

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.

.corner {
    border-top-left-radius: 50px 10px;
    border-bottom-right-radius: 25px;
}

<div style="background-color: red; width: 200px; height: 100px;" class="corner"></div>

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

Voici quelques exemples d'utilisation de border-radius :

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

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

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▲

.corner-image {
    border-image-source : url('fond.gif');
}

III-A-2. Border-image-slice▲

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

III-A-3. Border-image-width▲

.corner-image {
    border-image-width: 26px;
}

III-A-4. Border-image-outset▲

.corner-image {
    border-image-outset: 26;
}

III-A-5. Border-image-repeat▲

.corner-image-1 {
    border-image-repeat: stretch stretch;
}
 
.corner-image-2 {
    border-image-repeat: repeat repeat;
}
 
.corner-image-3 {
    border-image-repeat: round round;
}

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 :

.corner-image {
    border-width: 26px; /* Fix pour Opera */
    border-image: url('fond.gif') 26 / 26px round;
}

Qui est la version abrégée de :

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

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