Facbook viewat  Flickr
Accueil du site > Tutoriels > Création d’arrondis en CSS

CSS

Création d’arrondis en CSS

Mise en page

2 votes

Publié le lundi 28 mars 2011

Comment réaliser en CSS   des arrondis compatibles pour tous les navigateurs ?

Tous simplement en utilisant les nouvelles fonctionnalités introduites par CSS3 :

Voici un exemple de code :

        -moz-border-radius: 10px 10px 0 0;

       -webkit-border-radius: 10px 10px 0 0;

       border-radius: 10px 10px 0 0;
       
       -webkit-border-top-left-radius: 10px;

       -webkit-border-top-right-radius: 10px;

Le fichier joint contient le javascript pour IE. Il faut par ailleurs rajouter dans la balise head le code suivant :

<!--[if lte IE 8]><script type="text/javascript" src="js/arrondis_IE-min.js"></script><![endif]-->

Explications :

  • -moz-border-radius : 10px 10px 0 0 ; il s’agît des coins arrondis pour Firefox.
  • -webkit-border-radius : 10px 10px 0 0 ; il s’agît des coins arrondis pour Chrome.
  • border-radius : 10px 10px 0 0 ; il s’agît des coins arrondis pour Internet Explorer.

Les 4 valeurs sont alors utilisées dans l’ordre haut gauche, haut droit, bas droit et bas gauche. Si moins de 4 valeurs sont renseignées, la liste des valeurs est répétée pour remplir les valeurs restantes.

Répondre à cet article

Plan du site | Contact | Suivre la vie du site RSS 2.0