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.
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.-
Reportez-vous à la description générale de ces valeurs.
Les exemples de syntaxe sont donnés avec border-top-left-radius
mais peuvent s'appliquer à n'importe
laquelle des quatre propriétés.
Simulateur.
border-top-left-radius
: