Propriété CSS border-radius
Exemple
Ajoutez des coins arrondis à deux éléments <div> :
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La border-radius
propriété définit le rayon des coins de l'élément.
Astuce : Cette propriété permet d'ajouter des coins arrondis aux éléments !
Cette proprié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 :
Valeur par défaut: | 0 |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.borderRadius="25px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Syntaxe CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Remarque : Les quatre valeurs pour chaque rayon sont données dans l'ordre haut-gauche, haut-droit, bas-droit, bas-gauche. Si en bas à gauche est omis, c'est la même chose qu'en haut à droite. Si en bas à droite est omis, c'est la même chose qu'en haut à gauche. Si en haut à droite est omis, c'est la même chose qu'en haut à gauche.
Valeurs de propriété
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Définissez des coins arrondis pour un élément avec une couleur d'arrière-plan :
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Exemple
Définissez des coins arrondis pour un élément avec une bordure :
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Exemple
Définissez des coins arrondis pour un élément avec une image d'arrière-plan :
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Exemple
Remarquez également ceci :
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
Pages connexes
Tutoriel CSS : Coins arrondis CSS
Référence HTML DOM : propriété borderRadius