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

La propriété border-bottom-left-radius spécifie l'arrondissement du coin inférieure-gauche de l'élément. Il existe trois types des formes: un cercle ou une ellipse, si on n'utilise aucune valeur, le coin est carré. 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.

La propriété border-bottom-left-radius 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.

Les pourcentages pour le radius horizontal s'appliquent au largeur de la boîte, les pourcentages pour le radius vértical s'appliquent à l'hauteur de la boîte. Les valeurs négatives sont invalides.

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-gauche est animable. .
Version CSS3
Syntaxe DOM object.style.borderBottomLeftRadius = "35px";

Syntaxe

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

Exemple

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

Résultat

Essayons un autre exemple avec deux valeurs.

Exemple

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

Résultat

Voici un exemple avec pourcentage.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      border: 2px solid blue;
      background-color: #666;
      padding: 10px;
      border-bottom-left-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-bottom-left-radius.</h2>
    <div></div>
  </body>
</html>

Résultat

Valeurs

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

Support de Navigateurs

4.0+ 4.0+ 5.0+ 10.5+


Trouvez-vous cela utile?

Articles Associées