Les arrondis css

Le border-radius

border-radius est une propriété CSS3 qui est utilisable dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.

Seul internet explorer n'aime pas cette propriété.

Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left).

Ainsi la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :

    {    border-radius: 5px 10px 0 5px;  }

le site CSS3pie.com

Puisque la propriété CSS3 border-radius n'est pas reconnue par Internet Explorer, il va falloir utiliser une autre méthode tout aussi efficace

Il existe plusieurs techniques basées sur JavaScript pour permettre d'émuler automatiquement la création de coins arrondis

Vous allez sur le site css3pie.com

Vous remplissez les champs et vous récupérez le fichier que vous incluez dans votre site

Syntaxe a mettre dans votre CSS :

     .arrondi {    -moz-border-radius: 10px;      -webkit-border-radius: 10px;      border-radius: 10px;      behavior: url(/PIE.htc);  }