Créer des coins arrondis en CSS

Ce tutoriel vous présente comment réaliser des coins arrondis grâce à la propriété border-radius utilisé en CSS3. Il est à noter que seule les navigateurs modernes reconnaissent cette propriété. Pour certains navigateur un peut plus ancien, il est nécessaire de préfixer la propriété border-radius par -moz- sur Gecko (Firefox, Camino, Netscape, etc...) ou par -webkit- sur Webkit (Safari, Chrome,etc..) pour fonctionner.

Les exemples ci-dessous fonctionnent (testé) sous Chrome et Firefox dernière version ainsi que IE9.

Pour les navigateurs modernes :
#cadre{
border-radius : 5px;
}
Pour les navigateur un peut plus ancien :
#cadre{
border-radius : 5px;
/*Webkit*/
-webkit-border-radius : 5px;
/*Gecko*/
-moz-border-radius : 5px;
}
Exemple ci-dessous d'un cadre avec coins arrondis :

 

Il est également possible de définir les arrondis des angles indépendamment :
#cadre{
border-radius : 5px 10px 15px 20px;
-webkit-border-radius : 5px 10px 15px 20px;
-moz-border-radius : 5px 10px 15px 20px;
}
Les chiffres de la propriété border-radius correspondent respectivement à : top, right, bottom, left. Ainsi, la class CSS ci-dessus va créer un cadre arrondi de 5px en haut à gauche, 10px en haut à droite, 15px en bas à droite et 20px en bas à gauche dont  vous pouvez voir le résultat ci-dessous.

 

On peut même s'amuser à faire des cercles :

 
#cadre{
width:100px;
height:100px;
background: #DDD;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}
Ou encore des ovales :
 
#ovale{
background-color:#DDD;
width:200px;
height:100px;
border-radius:100px/50px;
-webkit-border-radius:100px/50px;
-moz-border-radius:100px/50px;

Dans cet exemple d'un ovale créé en CSS, les 2 chiffres sont séparés par une barre oblique (slach) et correspondent à l'arrondi horizontale et à l'arrondi verticale. Pour simplifier, le premier chiffre de la propriété border-radius correspond à la moitié de la longueur du div. Le second chiffre correspond à la moitié de la hauteur du div.
coins arrondis en css
Voir/déposer un commentaire (0) | Signaler un problème