Propriété CSS border-bottom-right-radius

La propriété CSS border-bottom-right-radius définit l'arrondissement du coin inférieure-droit de l'élément.

La propriété border-bottom-right-radius spécifie le radius horizontal et vértical qui définit le coin inférieure-droit arrondissé pour une boîte de bordure. Elle a deux valeurs: length et percentage.

S'il y a seulement une valeur utilisée, cette valeur spécifie les radius horizontal et vertical de l'ellipse. Si on utilise les deux valeurs, la première définit le radius horizontal et la deuxième définit le vértical. Si vous utiliser une image de fond ou une couleur, elle sera taillée à la bordure. Le procès de coupure est définit par la valeur de la propriété background-clip.

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. Le radius de la bordure inférieure-droit est animable.
Version	CSS3
Syntaxe DOM	object.style.borderBottomRightRadius = "15px";

Syntaxe

border-bottom-right-radius: length | % | initial | inherit;

Essayons un exemple avec une valeur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #1c87c9;
      border: 4px solid #000000;
      border-bottom-right-radius: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-bottom-right-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Maintenant essayons un autre exemple avec deux valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #eee;
      border: 4px solid #666;
      border-bottom-right-radius: 30px 15px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-bottom-right-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Définissons les valeurs en pourcentage.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #8ebf42;
      border: 4px solid #000000;
      border-bottom-right-radius: 30% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-bottom-right-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Spécifie la formation du coin inférieure-droit par "px".
%	Spécifie la formation du coin inférieure-droit en pourcentage.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.