CSS3 coins arrondis
Avec le CSS3 border-radius propriété, vous pouvez donner tout élément "coins arrondis".
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius propriété
Avec CSS3, vous pouvez donner tout élément "coins arrondis", en utilisant le border-radius propriété.
Voici trois exemples:
1. coins arrondis pour un élément avec une couleur de fond spécifiée:
Coins arrondis!
2. Coins arrondis pour un élément avec une bordure:
Coins arrondis!
3. Coins arrondis pour un élément avec une image de fond:
Coins arrondis!
Voici le code:
Exemple
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} Essayez - le vous - même »  | Astuce: Le border-radius propriété est en fait un raccourci pour le border-top-left-radius , border-top-right-radius , border-bottom-right-radius et border-bottom-left-radius propriétés. |
|---|
CSS3 border-radius - Précisez chaque coin
Si vous spécifiez une seule valeur pour le border-radius propriété, ce rayon sera appliqué à tous les 4 coins.
Cependant, vous pouvez spécifier chaque coin séparément si vous le souhaitez. Voici les règles:
- Quatre valeurs: première valeur applique en haut à gauche, deuxième valeur applique en haut à droite, troisième valeur applique en bas à droite, et la quatrième valeur applique à coin en bas à gauche
- Trois valeurs: première valeur applique en haut à gauche, deuxième valeur applique en haut à droite et en bas à gauche, et la troisième valeur applique en bas à droite
- Deux valeurs: première valeur applique au coin supérieur gauche et inférieur droit, et la deuxième valeur applique en haut à droite et le coin inférieur gauche
- Une valeur: tous les quatre coins sont arrondis aussi
Voici trois exemples:
1. Quatre valeurs - border-radius: 15px 50px 30px 5px :
2. Trois valeurs - border-radius: 15px 50px 30px :
3. Deux valeurs - border-radius: 15px 50px :
Voici le code:
Exemple
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Essayez - le vous - même » Vous pouvez également créer des coins elliptiques:
Exemple
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Essayez - le vous - même » Testez-vous avec des exercices!
CSS3 coins arrondis Propriétés
| Propriété | La description |
|---|---|
| border-radius | Un raccourci pour définir tous les quatre frontières - * - * - propriétés de rayon |
| border-top-left-radius | Définit la forme de la frontière du coin supérieur gauche |
| border-top-right-radius | Définit la forme de la frontière du coin en haut à droite |
| border-bottom-right-radius | Définit la forme de la frontière du coin en bas à droite |
| border-bottom-left-radius | Définit la forme de la frontière du coin inférieur gauche |