Définition et utilisation de la propriété border-radius
La propriété border-radius est une propriété raccourcie pour fixer les rayons des quatre coins de la bordure.
Astuce : Cette propriété vous permet d'ajouter des coins arrondis aux bordures des éléments html!
| Valeur par défaut : | 0 |
| Héritée : | No |
| Animer : | Oui. |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.borderRadius="20px" |
Appui de navigateur de la propriété border-radius
Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété border-radius.
Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné avec ce préfixe.
| Propriété | Navigateur |  |  |  |  |  |
| border-radius |
5.0 4.0 -webkit- |
9.0 |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Syntaxe CSS de la propriété border-radius
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 la bas gauche est omis c'est la valeur du haut droit qui sera utilisée. Si le bas droit est omis c'est la valeur du haut gauche qui le remplace. Si haut droit est omis il prend la même valeur que le haut gauche.
Donc si vous fournissez une seule valeur, elle déterminera le rayon des quatre coins
Pour définir un rayon horizontal différent du vertical, utilisez une barre oblique pour les séparer ( / ). La valeur sur le côté gauche de la barre oblique détermine le rayon horizontal . La valeur sur le côté droit détermine le rayon vertical .
Valeurs de propriété border-radius
| Valeur | Description |
|---|---|
| length | Définit le rayon des coins en px, pt, cm, em, etc... La valeur par défaut est 0 |
| % | Définit le rayon des coins en% |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite cette propriété de son élément parent. |
Exemple 1
border-radius:1em;
Ce qui est équivalent à :
border-top-left-radius:1em;
border-top-right-radius:1em;
border-bottom-right-radius:1em;
border-bottom-left-radius:1em;
Exemple 2
border-radius: 1.5em 2em 3.5em / 0.6em 4em;
Ce qui est équivalent à:
border-top-left-radius: 1.5em 0.6em;
border-top-right-radius: 2em 4em;
border-bottom-right-radius: 3.5em 0.6em;
border-bottom-left-radius: 2em 4em;
Exemple 3
Sélectionner le code
<!doctype html>
<html>
<head>
<style type="text/css">
.bordures-arrondies {
width:300px;
height:80px;
padding:10px;
border: 1px solid crimson;
-webkit-border-radius: 25px 10px 10px 40px/20px; /* Chrome et Safari
*/
-moz-border-radius: 25px 10px 10px 40px/20px; /* Firefox */
-ms-border-radius: 25px 10px 10px 40px/20px; /* Internet Explorer */
-o-border-radius: 25px 10px 10px 40px/20px; /* Opera */
border-radius:25px 10px 10px 40px/20px; /* CSS3 */
}
</style>
</head>
<body>
<div class="bordures-arrondies">
Cet élément a les cois arrondis.
</div>
</body>
</html>
Exemple : Modifier le rayon de la bordure avec JavaScript
Voici un exemple qui permet de modifier ou changer la propriété css border-radius en utilisant du JavaScript.Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Changer la valeur de la propriété border-radius avec JavaScript </title>
<style>
#ojd {
border: 1px solid black;
width: 300px;
height: 300px;
margin:auto;
}
</style>
</head>
<body>
<div style="text-align:center;width: 400px; height: 400px;">
<h1>Changer le rayon de la bordure avec JavaScript</h1>
<p>Cliquez sur le bouton "CHANGER" pour modifier la propriété border-radius de l'élément image:</p>.
<button onclick="changer()"> CHANGER </button><br><br>
<img src="https://placekitten.com/300/300" alt="un chaton" id="ojd">
<script>
function changer() {
document.getElementById("ojd").style.borderRadius = "25px";
}
</script>
</body>
</html>
Exemple : Animer la propriété border-radius avec css
Voici un exemple montrant comment animer la propriété css border-radius .Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Animer la propriété border-radius avec css </title>
<style>
#ojd {
border: 1px solid black;
width: 300px;
height: 300px;
margin:auto;
animation: ojd 5s infinite;
}
@keyframes ojd {
50% {border-radius: 50%;}
}
</style>
</head>
<body>
<div style="text-align:center;width: 400px; height: 400px;">
<h1>Animation de border-radius</h1>
<p>Changez progressivement la propriété border-radius de 0 à 50% du width, et inversement:<p>.
<img src="https://placekitten.com/300/300" alt="un chaton" id="ojd">
</body>
</html>