Propriété CSS border-radius
La propriété border-radius est utilisée pour arrondir les coins de la bordure externe d'un élément.
La propriété border-radius fait partie des propriétés CSS3.
Cette propriété est une propriété raccourcie pour les propriétés border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius, qui servent à définir les quatre coins d'un élément séparément. Cependant, la propriété border-radius peut être utilisée pour définir les quatre coins simultanément. Elle peut accepter de une à quatre valeurs.
Si quatre valeurs sont fournies, elles s'appliquent respectivement aux coins haut-gauche, haut-droite, bas-droite et bas-gauche. Si la valeur bas-gauche est omise, elle prend par défaut la valeur haut-droite. Si la valeur bas-droite est omise, elle prend par défaut la valeur haut-gauche. Si seules deux valeurs sont fournies, la première s'applique aux coins haut-gauche et bas-droite, et la seconde aux coins haut-droite et bas-gauche. Si une seule valeur est fournie, elle s'applique aux quatre coins.
La propriété border-radius se spécifie comme suit :
- une, deux, trois ou quatre valeurs de longueur ou de pourcentage utilisées pour définir un rayon unique pour les coins.
- éventuellement suivie d'une barre oblique (
/) et d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage. Cela permet de définir un rayon supplémentaire, afin d'obtenir des coins elliptiques.
Le premier ensemble de (1 à 4) valeurs définit le rayon horizontal pour les quatre coins. Un deuxième ensemble de valeurs optionnel, précédé d'une barre oblique, définit les rayons verticaux pour les quatre coins. Si un seul ensemble de valeurs est fourni, ces valeurs seront utilisées pour déterminer également les rayons verticaux et horizontaux.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Hérité | Non |
| Animable | Oui. Chaque propriété du raccourci est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.borderRadius = "20px"; (Note : JavaScript utilise la notation camelCase borderRadius, contrairement au nom de la propriété CSS avec des tirets.) |
Syntaxe
Syntaxe de la propriété CSS border-radius
border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;Exemple de la propriété border-radius :
Exemple de la propriété CSS border-radius
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
width: 50%;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Border-radius example</h2>
<div></div>
</body>
</html>Résultat
Voir un exemple avec des valeurs en pourcentage et en pixels :
Exemple de la propriété border-radius avec des valeurs en pourcentage et en pixels :
Exemple de la propriété CSS border-radius avec des valeurs en pourcentage et en pixels
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-pixel {
height: 40px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-percent {
width: 120px;
height: 120px;
margin-top: 20px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-radius example with percent and pixel values</h2>
<div class="radius-pixel"></div>
<div class="radius-percent"></div>
</body>
</html>Vous pouvez également définir le border-radius d'un élément avec une couleur de fond ou une image de fond.
Exemple de la propriété border-radius avec les propriétés background-color et background-image :
Exemple de la propriété CSS border-radius avec les propriétés couleur et image de fond
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-bg {
width: 250px;
height: 200px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-img {
width: 250px;
height: 200px;
margin-top: 20px;
background-color: lightgray;
background: url('https://www.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
background-position: left top;
background-repeat: repeat;
border: 2px solid #1c87c9;
border-radius: 25px;
}
</style>
</head>
<body>
<h1> Border-radius example with background color</h1>
<div class="radius-bg"></div>
<h2> Border-radius example with background image</h2>
<div class="radius-img"></div>
</body>
</html>Remarque : Dans les anciens navigateurs, les images de fond peuvent ne pas être recadrées selon les coins arrondis. Utilisez background-clip: border-box; pour garantir un comportement cohérent.
Voyons maintenant un exemple rempli de différentes boîtes avec des valeurs border-radius variées qui forment la forme des boîtes.
Exemple de la propriété border-radius avec plusieurs valeurs :
Exemple de la propriété CSS border-radius avec différentes valeurs (%, px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 250px;
height: 150px;
border: solid 3px #1c87c9;
background: #1c87c9;
}
.radius_1 {
border-radius: 25px;
}
.radius_2 {
border-radius: 25% 10%;
}
.radius_3 {
border-radius: 10% 30% 50% 70%;
}
.radius_4 {
border-radius: 10% / 50%;
}
.radius_5 {
border-radius: 10px 100px / 120px;
}
.radius_6 {
border-radius: 25% 10%;
}
.radius_7 {
border-radius: 50% 20% / 10% 40%;
}
.radius_8 {
border-radius: 50%;
}
</style>
</head>
<body>
<h1> Border-radius examples</h1>
<div class="radius_1"></div>
<br />
<div class="radius_2"></div>
<br />
<div class="radius_3"></div>
<br />
<div class="radius_4"></div>
<br />
<div class="radius_5"></div>
<br />
<div class="radius_6"></div>
<br />
<div class="radius_7"></div>
<br />
<div class="radius_8"></div>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| length | Définit la taille d'arrondi des coins. | Tester » |
| % | Définit la taille d'arrondi des coins en pourcentage. | Tester » |
| initial | Définit la valeur par défaut de la propriété. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'border-radius' ?