La propriété CSS3 border-radius

La propriété CSS border-radius est un raccourci pour définir plusieurs propriétés border-radius en un seul endroit. Il s'agit d'un moyen efficace d'ajouter des coins arrondis aux bordures d’un élément HTML.
La propriété CSS border-radius est un raccourci pour définir plusieurs propriétés "border radius" en un seul endroit. Il s'agit d'un moyen efficace d'ajouter des coins arrondis aux bordures d’un élément HTML.
La propriété border-radius définit : border-top-left-radius, border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius.
La propriété border-radius doit être utilisé en conjonction avec la propriété border (ou toute autre propriété pour définir la frontière réelle).

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 .