Coins arrondis CSS
Coins arrondis CSS
Avec la propriété CSS border-radius, vous pouvez donner à n'importe quel élément des "coins arrondis".
Propriété CSS border-radius
La propriété CSS
border-radiusdéfinit le rayon des coins d'un élément.
Astuce : Cette propriété permet d'ajouter des coins arrondis aux éléments !
Voici trois exemples :
1. Coins arrondis pour un élément avec une couleur d'arrière-plan 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;
}
Astuce : La border-radiuspropriété est en fait une propriété abrégée pour les
propriétés border-top-left-radius, border-top-right-radiuset .border-bottom-right-radiusborder-bottom-left-radius
CSS border-radius - Spécifiez chaque coin
La border-radiuspropriété peut avoir de une à quatre valeurs. Voici les règles :
Quatre valeurs - border-radius : 15px 50px 30px 5px ; (la première valeur s'applique au coin supérieur gauche, la deuxième valeur s'applique au coin supérieur droit, la troisième valeur s'applique au coin inférieur droit et la quatrième valeur s'applique au coin inférieur gauche) :
Trois valeurs - border-radius : 15px 50px 30px ; (la première valeur s'applique au coin supérieur gauche, la deuxième valeur s'applique aux coins supérieur droit et inférieur gauche et la troisième valeur s'applique au coin inférieur droit) :
Deux valeurs - border-radius : 15px 50px ; (la première valeur s'applique aux coins supérieur gauche et inférieur droit, et la deuxième valeur s'applique aux coins supérieur droit et inférieur gauche) :
Une valeur - border-radius : 15 px ; (la valeur s'applique aux quatre coins, qui sont arrondis de manière égale :
Voici le code :
Exemple
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Vous pouvez également créer des coins elliptiques :
Exemple
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Propriétés des coins arrondis CSS
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |