w3docs logo

Propriété CSS border-radius

La porpriété border-radius est utilisée pour faire les coins cerclé pour le bord extérieure d'un élément.

C'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 sont utilisées pour définir les quatres coins d'un élément séparément. Mais la propriété border-radius peut être utilisée pour les quatres coins à la fois. Elle peut avoir d'un à quatre valeurs.

Si toutes les quatres valeurs sont définies, elles répresentent proprement les bordures supérieure-gauche, supérieure-droite, inférieure-droite et inférieure-gauche. Si la bordure inférieure-gauche est manquée, c'est la même, que la supérieure-droite; si l'inférieure-droite est omise, c'est la même, que la supérieure-gauche, et si il y a seulement une valeur définie, elle est également utilisée pour toutes les quatre valeurs.

La propriété border-radius est spécifiée comme:

  1. une, deux, trois ou quatre valeurs de longueur ou de pourcentage. Cela est utilisé pour définir un seul radius pour les coins.
  2. suivi facultativement par un barre oblique ( / ) et par une, deux, trois ou quatre valeurs de longueur ou de pourcentage. Cela est utilisé pour définir un radius supplémentire, donc on peut avoir les coins elliptiques.

La première boîte (1-4) des valeurs définit le radius horizontal pour tous les quatres coins. La deuxième boîte facultative des valeurs, précédé par un barre oblique, définit le radius vértical pour tous les quatres coins. Si seulement une boîte des valeurs est fourni, alors ces valeurs sont utilisées pour les deux horizontal et vertical également.

Valeur initiale 0
Appliquée à Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non
Animable Oui. Chacune de ces propriétés de sténo est animable.
Version CSS3
Syntaxe DOM object.style.borderRadius = "20px";

Syntaxe

border-radius: 1-4 length | 1-4 alength (%) |  initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      width: 50%;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-radius</h2>
    <div></div>
  </body>
</html>

Pour le mieux support de navigateur possible, vous devez prefixer avec -moz- pour Firefox, et-webkit- pour Safari, Chrome, et d'autres navigateurs.

Les versions Firefox actuels supportent la propriété border-radius sans le préfixe -moz-.

Voyez un exemple avec les préfixes -moz- et-webkit-, où il y a deux différentes valeurs définies pour la propriété border-radius: avec pourcent et pixel.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .radius-pixel {
      height: 40px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-percent {
      width: 120px;
      height: 120px;
      margin-top: 20px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-radius avec -moz- et -webkit-</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Vous pouvez également définir la propriété border-radius pour un élément avec background color ou background image.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .radius-bg {
      width: 250px;
      height: 200px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-img {
      width: 250px;
      height: 200px;
      margin-top: 20px;
      background-img: lightgray;
      background: url('/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
      background-position: left top;
      background-repeat: repeat;
      border: 2px solid #1c87c9;
      border-radius: 25px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2> Exemple de border-radius avec background color</h2>
    <div class="radius-bg"></div>
    <h2> Exemple de border-radius avec  background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Maintenant voyons un exemple plein de boîtes variées avec des différentes valeurs border-radius qui créent la forme des boîtes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 250px;
      height: 150px;
      border: solid 3px #1c87c9;
      background: #1c87c9;
      }
      .radius_1 {
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      }
      .radius_2 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_3 {
      border-radius: 10% 30% 50% 70%;
      -moz-border-radius: 10% 30% 50% 70%;
      -webkit-border-radius:  10% 30% 50% 70%;
      }
      .radius_4 {
      border-radius: 10% / 50%;
      -moz-border-radius:  10% / 50%;
      -webkit-border-radius: 10% / 50%;
      }
      .radius_5 {
      border-radius: 10px 100px / 120px;
      -moz-border-radius:  10px 100px / 120px;
      -webkit-border-radius:  10px 100px / 120px;
      }
      .radius_6 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_7 {
      border-radius: 50% 20% / 10% 40%;
      -moz-border-radius:  50% 20% / 10% 40%;
      -webkit-border-radius:  50% 20% / 10% 40%;
      }
      .radius_8 {
      border-radius: 50%;
      -moz-border-radius:  50%;
      -webkit-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2> Border-radius examples</h2>
    <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
length Définit la taille de cerclement des coins.
% Définit la taille de cerclement des coins en pourcents .
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
4+ 3+ 3.1+ 11.5+

Pratiquez vos connaissances

Dans CSS, à quoi sert la propriété 'border-radius'?
Trouvez-vous cela utile?