Quelle est la bonne/la meilleure façon de définir des bordures courbes compatibles CSS/CSS3/cross-browser?Bordures croisées CSS Cross-Browser
Existe-t-il un moyen non JavaScript de le faire, tout en étant compatible avec plusieurs navigateurs? Si non, existe-t-il une solution de contournement appropriée?
Avez-vous essayé:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
ensemble? Cela devrait couvrir les 3 principaux navigateurs dans leurs dernières versions (au moins). Sans javascript ou en utilisant des images, vous n'obtiendrez pas une couverture complète de tous les navigateurs.
La meilleure façon de le faire est avec border-radius.
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
Ceci n'est compatible qu'avec Safari, Firefox et Chrome. Cela ne fonctionne pas pour IE 7 + 8 (et moins)
Si vous voulez le plus de compatibilité, mais le moins de flexibilité, les images sont la voie à suivre.
Si vous voulez de la flexibilité et de la compatibilité avec les navigateurs, rendez-vous sur javascript. Le meilleur que j'ai trouvé convertit la déclinaison CSS3 en coins plus arrondis dans IE 7 + 8.
Vérifiez que l'un ici: http://www.curvycorners.net/
Voir les CSS Border Radius Generator (simples coins arrondis) ou CSS3 Please (plus d'effets) pour une solution CSS uniquement. Si vous voulez quelque chose qui fonctionne dans Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer 6.0+ avec aucune image puis essayez Raphaël. Voici un nice talk by Dmitry Baranovskiy, auteur de Raphaël, expliquant pourquoi c'est cool.
Vous devez utiliser ceci:
-moz-border-radius: 20px;
border-radius: 20px
WebKit a soutenu plaine border-radius pendant un certain temps maintenant. Par exemple, le préfixe -webkit a été supprimé. Par exemple,
Pour faire ce travail dans Internet Explorer, je recommande d'utiliser CSS3 PIE, qui est aussi simple que le téléchargement d'un petit fichier, et en ajoutant ceci à votre CSS:
behavior: url(PIE.htc)
Bien sûr, cela ne fonctionne que si Javascript est activé dans IE (ce qui est généralement le cas).
Quels navigateurs? – SLaks
Bonne façon? 'border-radius'. Meilleur en termes de compatibilité? Images. – BoltClock
Vous souciez-vous si les utilisateurs d'Internet Explorer ne disposent pas d'un site vraiment joli? Déterminez combien vous vous souciez et ensuite peser cela contre combien de travail supplémentaire il faut pour que cela se produise. – nickf