[Webdesign] Des coins arrondis « propres » de 1px en CSS pur

Faire des cadres avec coins arrondis n’est pas une nouveauté en Webdesign. On peut même dire que cela fait plusieurs années que différentes techniques sont maitrisées (wrappers, radius CSS3, images …) .

Pourtant, faire des coins arrondis « proprement », sans éléments superflus et en CSS, c’est un peu l’enfer. Par exemple, la technique des wrappers ne fonctionne pas si vous souhaitez avoir une couleur de fond de cadre externe qui soit un gradient.

Il n’y a pas de solution idéale. Mais si vous cherchez à créer des petits arrondis d’1px, cet article va vous intéresser et vous faciliter la vie.

En faisant dépasser des coins de 1px, il est possible de donner l’impression d’arrondi sans passer par des techniques élaborées. Et le résultat est correct visuellement.

La solution repose sur deux simples blocs HTML: Un élément externe (outer) et un élément interne (inner).

L’élément externe fixe la couleur de base alors que l’élément interne déborde d’1 px sur l’élément externe sur les cotés gauche et droit.
En créant une marge de 1 px en haut et en bas sur l’élément externe, nous nous assurons que l’élément interne garde ses distances, créant ainsi l’effet voulu.

Il y a 3 manières de faire: une avec des marges (au sens CSS), l’autre avec des bordures et la troisième est une combinaison des deux premières.

/* exemple 1 */
.exemple1 .outer {background:#0cc; margin:0px 1px; padding:1px 0px;}
.example1 .inner {background:#0cc; margin:0 -1px;}

/* exemple 2 */
.exemple2 .outer {margin:0px 1px; border:1px solid #0cc; border-left-width:0; border-right-width:0;} .exemple2 .inner {background:#cc0; margin:0 -1px; border:1px solid #0cc; border-top-width:0; border-bottom-width:0;}

/* combinaison */
.exemple2 .outer {background:#0cc; margin:0px 1px; padding:1px 0px;}
.exemple2 .inner {background:#cc0; margin:0 -1px; border:1px solid #0cc; border-top-width:0; border-bottom-width:0;}

Le résultat est pas mauvais je trouve:

Gros avantage, cette technique fonctionne dans toutes les versions de IE et les autres navigateurs (les vrais).

Elle est très pratique pour les petits éléments comme des boutons, d’autant qu’elle permet des couleurs de bordures différenciées.

crédits: onderhond