CSS Coins Arrondis
Coins Arrondis en CSS
La propriété CSS border-radius est utilisée pour créer des coins arrondis pour les éléments.
Propriété border-radius en CSS
La propriété border-radius définit le rayon des coins d'un élément.
Cette propriété peut être appliquée à tous les éléments ayant une background-color , une border , ou une background-image .
Voici trois exemples :
1. Coins arrondis pour un élément avec une couleur de fond :
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
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background-image: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
} Astuce : La propriété border-radius est en réalité une propriété abrégée pour les propriétés border-top-left-radius , border-top-right-radius , border-bottom-right-radius et border-bottom-left-radius .
border-radius CSS - Spécifier Chaque Coin
La propriété border-radius 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 au coin supérieur droit, la troisième au coin inférieur droit, et la quatrième 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 aux coins supérieur droit et inférieur gauche, et la troisième 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 aux coins supérieur droit et inférieur gauche) :
Une valeur - border-radius: 15px; (la valeur s'applique à tous les quatre coins, qui sont arrondis de manière égale) :
Voici le code :
Exemple
#div1 {
border-radius: 15px 50px 30px 5px; /* quatre valeurs */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px; /* trois valeurs */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px; /* deux valeurs */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px; /* une valeur */
background: #04AA6D;
width: 200px;
height: 150px;
} Formes Elliptiques et Circulaires en CSS
Pour créer des coins elliptiques, vous devez spécifier deux valeurs pour chaque rayon, séparées par une barre /. La première valeur définit le rayon horizontal, et la deuxième définit le rayon vertical.
Pour créer une forme ovale (pour un élément rectangulaire) ou une forme circulaire (pour un élément carré), définissez border-radius à 50%.
Exemple
Créez des formes elliptiques, ovales et circulaires :
#div1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px / 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
} Propriétés des Coins Arrondis en CSS
| Propriété | Description |
|---|---|
| border-radius | Propriété abrégée pour définir les quatre propriétés border-*-*-radius |
| border-top-left-radius | Définit la forme de la bordure du coin supérieur gauche |
| border-top-right-radius | Définit la forme de la bordure du coin supérieur droit |
| border-bottom-right-radius | Définit la forme de la bordure du coin inférieur droit |
| border-bottom-left-radius | Définit la forme de la bordure du coin inférieur gauche |