Faire des coins arrondis en CSS

Border-radius : arrondir les angles grâce aux CSS

Il a longtemps été compliqué de créer des éléments avec des angles arrondis en HTML. Depuis l’arrivée de CSS3 et de sa propriété border-radius, le problème est résolu. Afficher des images, des boutons, des tableaux ou des zones de texte avec des bordures ou des coins arrondis est un jeu d’enfant.

Les coins carrés

Le web a longtemps eu les coins carrés ! Historiquement, les tableaux, les images, les zones de texte, aucun n’avait de bords arrondis, que des angles à 90 degrés… Arrondir les angles est alors devenu une espèce de quête du Graal pour tous les développeurs, intégrateurs et autres webmasters. Surtout que les graphistes (oui, à l’époque on ne parlait pas encore de webdesigners…), eux, avaient déjà depuis longtemps la possibilité de faire des angles ronds avec leur Photoshop 3.0 et ils ne s’en privaient pas ! Ça donnait à peu près ça :

Le graphiste : « Tiens, la maquette du site truc est prête, tu peux décliner les pages quand tu veux. »
L’intégrateur : « Tu fais chier, t’as encore collé des angles arrondis et des dégradés partout, je t’ai déjà dit qu’en HTML c’est pas possible de gérer les dégradés et les arrondis ! »
Le graphiste : « Ouais mais le client a validé la maquette alors il veut absolument ses dégradés et ses angles ronds… »
L’intégrateur : « Bon, ok, je vais me démerder…« 

Et les intégrateurs (qu’on a de plus en plus tendance à appeler développeurs de nos jours) se sont débrouillé avec les moyens du bord.

Les images et les tableaux

Il ont fait ça avec des images et des tableaux, puisque c’était à peu près tout ce qu’il y avait de disponible… En gros, pour créer un encart de texte sur une page avec un fond de couleur et des coins arrondis, il fallait créer un tableau de neuf cases (3×3), la case centrale étant réservée au contenu et les cases du pourtour servant aux embellissements graphiques (bordures, angles arrondis, ombrages, etc.)
Autant dire que c’était à chaque fois une vraie usine à gaz, sans compter le temps passé à découper toute ces images de quelques pixels de large. C’était l’horreur, mais on ne s’en rendait pas compte, on trouvait ça génial les bords arrondis, on s’éclatait avec nos tableaux !

Les DIV et les CSS

Quand les CSS ont pointé le bout de leur nez, on a essayé de se passer des tableaux pour créer des coins ronds. On pouvait se débrouiller avec des <DIV> imbriqués et quelques styles CSS pour gérer les backgrounds, mais il fallait toujours utiliser des images, ça n’était toujours pas très souple et le code n’était vraiment pas élégant…

CSS3 et border-radius

Puis est arrivée la propriété CSS3 border-radius. Depuis ce jour béni, on peut tout avoir à la fois : des coins arrondis sur des DIV, sur des images, sur des tableaux, sans avoir à gérer des images et tout en conservant un code élégant ! En pur CSS donne ça :

border-radius: 5px;

Pour prendre en compte les navigateurs un peu plus anciens ou ayant un peu de mal avec les normes CSS, ça donne ça :

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Les générateurs de border-radius

Pour les plus fainéants malins d’entre nous, il existe des générateurs Wysiwyg de classes CSS pour créer de jolis bords arrondis.
Le plus simple, c’est border-radius.com. Pas de fioriture, pas de superflu, que l’essentiel, bref, tout ce que j’aime ! Quatre zones de saisie aux quatre coins d’un bloc pour saisir les rayons des angles, une zone centrale avec le code CSS à copier/coller et une visualisation en temps réel du résultat. 100% efficacité.

En cherchant un peu dans votre moteur de recherche préféré, vous trouverez des dizaines d’autres générateurs de code, certains permettant par exemple de créer des tableaux un peu plus complexes, avec des bords arrondis, certes, puisque c’est le sujet de cet article, mais aussi avec des ombrages, des dégradés, des effets « pyjama« , etc.
C’est le cas de www.tablestyler.com ou  www.csstablegenerator.com pour n’en citer que deux.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *