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

border-top-left-radius,
border-top-right-radius,
border-bottom-left-radius,
border-bottom-right-radius.

Ces quatre propriétés définissent le rayon de l'un des angles de l'élément.

Pour une présentation plus complète des angles arrondis, reportez-vous à la propriété raccourcie border-radius.

Syntaxes.

Les exemples de syntaxe sont donnés avec border-top-left-radius mais peuvent s'appliquer à n'importe laquelle des quatre propriétés.

• border-top-left-radius: 10px;
  Une valeur numérique, positive ou nulle, suivie de son unité de dimension (voir les unités de dimensions en CSS). Le rayon de l'angle est défini à la valeur indiquée. La valeur par défaut est 0.
  Si l'unité est une unité de dimension absolue (px, cm...) l'angle sera arrondi suivant un quart de cercle.
• border-top-left-radius: 30%;
  Si la valeur est exprimée en pourcentage, l'angle sera probablement arrondi suivant un quart d'ellipse. En effet les pourcentages sont calculé par rapport aux dimensions de l'élément : sa largeur et sa hauteur. A moins que l'élément ne soit carré, l'arrondi d'angle sera donc elliptique.
• border-top-left-radius: 30px 50px;
  Deux valeurs séparées par un espace : les deux valeurs définissent un arrondi elliptique. La première valeur étant la largeur de l'ellipse et la deuxième valeur sa hauteur.
• border-top-left-radius: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.