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

❮ Précédent Suivant ❯

La propriété CSS border-top-left-radius définit l'arrondissement du coin supérieure-gauche de l'élément. Il y a trois types d'arrondissement. Ça peut être un cercle ou une ellipse, ou on peut utiliser aucune valeur et le coin est carré. Si vous utilisez 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é CSS border-top-left-radius est définie par 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 est animable.
Version	CSS1
Syntaxe DOM	object.style.borderTopLeftRadius = "25px";

Syntaxe

Border-top-left-radius: length | % | initial | inherit;

Voici un exemple de border-top-left-radius où on n'a utilisée q'une valeur. Si vous donnez une valeur, cette valeur spécifie la bordure supérieure et la bordure gauche à la fois.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 40px;
      background: #8ebf42;
      border: 4px solid #000000;
      border-top-left-radius: 25px;
      }          
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété CSS border-top-left-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec deux valeurs. La première valeur est pour la bordure supérieurue, et la deuxième est pour la bordure gauche.

Exemple

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

Essayez-vous-même!

Définissons la forme de la boîte en pourcentage. Ici aussi la première valeur définit le radius horizontal de l'ellipse et la deuxième valeur définit la vértical.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div{
      height: 40px;
      background: #eee;
      border: 4px solid #000000;
      border-top-left-radius: 50% 60%;
      }          
    </style>
  </head>
  <body>
    <h2>Exemple de border-top-left-radius.</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Définit l'arrondissement du coin supérieure-gauche.
%	Définit l'arrondissement du coin supérieure-gauche en pourcentage.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.