Générateur de coins arrondis avec border-radius

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Générateur de coins arrondis avec border-radius

La propriété CSS3 border-radius permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 border-radius : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent -webkit-border-radius et ceux qui tournent sur Gecko (Firefox, Camino) utilisent -moz-border-radius. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel…

Pour assurer une compatibilité maximum, il faut utiliser plein de déclarations CSS redondantes et c’est fastidieux. Heureusement, jacob bijani (Directeur de la création de Tumblr et à l’origine de start.io) a développé un générateur de coins arrondis qui s’appelle… border-radius.com ;)

Des coins arrondis différents à chaque angle

Il est possible de spécifier les coins arrondis pour Webkit, Gecko et CSS3 en cochant les cases appropriées

Un générateur de coins arrondis en CSS3

Exemple de coins arrondis en haut mais pas en bas

.roundies-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px; /* pour Chrome /
    -webkit-border-top-right-radius: 5px; / pour Chrome */
    border-radius: 5px 5px 0 0;
}

Google Chrome n’accepte pas les raccourcis : il faut ajouter explicitement chaque coins arrondis.

Exemple de coins arrondis identiques

Le générateur n’utilise pas la syntaxe raccourcie qui permet de gagner quelques lignes. Pour avoir des coins arrondis identiques pour les 4 angles avec une écriture plus concise on peut utiliser :

.rounded-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Pour terminer

Je vous conseille la lecture de Créer des coins arrondis en CSS et sans images pour plus d’informations, notamment en ce qui concerne Internet Explorer avec du Javascript et du composant .htc en veux-tu en voilà !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



10 commentaires pour “Générateur de coins arrondis avec border-radius”

  1. GregLone dit :

    L’outil de border-radius.com est intéressant et peut s’avérer pratique. Il lui manquerait juste la propriété -khtml-border-radius pour être parfait ;) Allez, tant qu’on y est, une case à cocher supplémentaire qui rajouterait behavior: url(border-radius.htc); à la fin du css serait peut-être du luxe mais parfois utile.

  2. Red-Rabbit dit :

    Et tant que des gens feront des pieds et des mains pour que le site passe dans Ie comme dans FF vous pensez vraiment que Microsoft fera des efforts ?

    Merci Bruno blogueur non-influent

  3. Bruno Bichet dit :

    @GregLone — Oui, bien vu. Je vais rajouter -khtml dans le billet à l’occasion. le behavior, oui pourquoi pas. J’ai testé, mais pas vraiment convaincu. D’ailleurs, je suis en train de me prendre la tête avec un billet qui fait le point sur l’utilisation « dans la vraie vie » de quelques techniques pour avoir des coins arrondis dans Internet Explorer.

    @Red-Rabbit — En parlant d’IE (quel esprit de transition) justement, je pense que faire un site partout comme dans FF est très réducteur. Mon truc à moi c’est que ça passe partout comme dans Chrome ;)

    Plus sérieusement. Si tu regarde ce blog dans IE, tu verras qu’il n’y a pas de coins arrondis parce que justement, je n’ai pas envie de faire des pieds et des mains pour IE. Mais c’est surtout parce que :

    J’ai conçu mon design sans coin arrondi, ce qui fait que leur absence ne choque pas (certaines personnes préfèrent même). le patron et le client ne sont pas pénibles avec ça ;)

    Comme je le précise dans le commentaire plus haut, j’attends de trouver une bonne solution pour mon blog : une solution qui ne m’obligera pas à trop modifier mon marquage html actuel car la plupart des « solution nécessitent généralement d’être appliquées sur une balise parente ou alors il faut une largeur explicite ce qui n’est pas toujours possible et tout un tas d’autres chose dont l’énumération.. bla bla ;) Stay tuned!

    • GregLone dit :

      En effet, la solution du .htc n’a pas été concluante pour moi non plus sur un site tournant avec Joomla… Certains parlent de conflit avec des librairies JS… Enfin bref, je m’éloigne un peu du sujet principal ;)

    • Red-Rabbit dit :

      Regarder le blog dans IE ? Ben je ne le ferais, j’ai Chrome. Mais plus sérieusement, y a bien longtemps que j’ignore les maladies multiple de IE, enfin surtout le 6 hein. Et je ne me suis jamais pris la tête avec les htc and co . Y a pas moyen au vu du temps passer pour un résultat pas toujours net. Et pour le blahblah on est bien d’accord :)

  4. pierre lou dit :

    T cool toi ;)

  5. Erwann31 dit :

    Bonjour, pareil moi moi pas mal de problèmes avec border-radius.htc, je préfère passer par des images arrondies insérées via contenu généré et pseudo-éléments CSS3(::before et ::after) qui fonctionnent sous IE avec le IE9.JS de Dean Edwards.

  6. Patrik dit :

    Pour ceux que ça intéresserait, il y a une version en français, un peu similaire: http://www.supportduweb.com/generateur-coins-arrondis-border-radius-moz-webkit-css3-rounded-corner-code.html

  7. Bugz dit :

    Bonjour,

    J’ai trouvé une version modé du script border-radius.htc, il s’appelle ie-css3.htc et permet de gérer les arrondies et les ombrages en CSS3 :

    Ombrages et arrondis CSS3 compatible Internet Explorer

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site