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

La propriété CSS border-top-left-radius arrondit le coin supérieur gauche de la boîte de bordure d'un élément. C'est l'une des quatre propriétés longhand — avec border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius — dans lesquelles la propriété raccourcie border-radius se décompose. Utilisez cette propriété longhand lorsque vous souhaitez arrondir un seul coin.

La propriété border-top-left-radius fait partie des propriétés CSS3.

Le coin peut être arrondi en cercle ou en ellipse, ou rester carré si aucune valeur n'est spécifiée. Si vous utilisez une image de fond ou une couleur, elle sera découpée selon la forme de la bordure. Le comportement de découpe est contrôlé par la propriété background-clip.

Fonctionnement des valeurs

La propriété border-top-left-radius accepte une ou deux valeurs, chacune spécifiée sous forme de <length> ou de <percentage> :

Une valeur définit à la fois les rayons horizontal et vertical du coin, produisant une courbe circulaire (quart de cercle).
Deux valeurs définissent les rayons d'une ellipse : la première est le rayon horizontal, la seconde le rayon vertical.

Les pourcentages pour le rayon horizontal se réfèrent à la largeur de l'élément, tandis que les pourcentages pour le rayon vertical se réfèrent à sa hauteur. Les valeurs négatives sont invalides et la déclaration est ignorée.

Attention : si la somme des rayons sur un côté dépasse la longueur de ce côté, le navigateur réduit proportionnellement tous les rayons des coins afin que les courbes ne se chevauchent jamais. Ainsi, une valeur très grande comme border-top-left-radius: 9999px est un moyen sûr de rendre un coin aussi arrondi que la boîte le permet.

Valeur initiale	0
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Héritage	Non
Animatable	Oui. Le rayon de la bordure est animatable.
Version	CSS3
Syntaxe DOM	object.style.borderTopLeftRadius = "25px";

Syntaxe

Syntaxe de la propriété CSS border-top-left-radius

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

Voici un exemple de border-top-left-radius où une seule valeur est utilisée. Lorsqu'une seule valeur est utilisée, elle définit à la fois les rayons horizontal et vertical de l'ellipse.

Exemple de la propriété border-top-left-radius :

Exemple de la propriété CSS border-top-left-radius avec une seule valeur

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #8ebf42;
        border: 4px solid #000000;
        border-top-left-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple suivant, la première valeur définit le rayon horizontal et la seconde le rayon vertical.

Exemple de la propriété border-top-left-radius avec deux valeurs :

Exemple de la propriété CSS border-top-left-radius avec deux valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #ccc;
        border: 4px solid #000000;
        border-top-left-radius: 50px 25px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

L'exemple suivant utilise des valeurs en pourcentage. La première valeur définit le rayon horizontal, et la seconde définit le rayon vertical.

Exemple de la propriété border-top-left-radius avec la valeur "%" :

Exemple de la propriété CSS border-top-left-radius avec une valeur en pourcentage

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        height: 40px;
        background: #eee;
        border: 4px solid #000000;
        border-top-left-radius: 50% 60%;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-left-radius example.</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
length	Définit l'arrondi du coin supérieur gauche.	Essayer »
%	Définit l'arrondi du coin supérieur gauche en pourcentage.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Quand utiliser la propriété longhand

Utilisez border-top-left-radius lorsqu'un seul coin doit être arrondi — par exemple un onglet, une bulle de dialogue ou une carte dont le bord supérieur est aligné contre un en-tête. Pour arrondir tous les coins à la fois, la propriété raccourcie border-radius est plus concise :

/* These two rules are equivalent for a single corner */
border-top-left-radius: 25px;
border-radius: 25px 0 0 0;

Propriétés associées

border-radius — raccourci pour les quatre coins.
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border — définit la largeur, le style et la couleur de la bordure.

Compatibilité des navigateurs

border-top-left-radius est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) sans préfixe vendeur.

Pratique

Que fait la propriété 'border-top-left-radius' en CSS ?

Elle permet d'ajouter des bordures arrondies à un élément HTML.Elle change la couleur de la bordure d'un élément HTML.Elle modifie spécifiquement le rayon supérieur gauche de la bordure.Elle redimensionne la bordure d'un élément HTML.Elle change la taille de la police d'un élément HTML.