Propriété CSS border-top-left-radius
La propriété CSS border-top-left-radius spécifie l'arrondi du coin supérieur gauche de l'élément.
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 d'arrière-plan ou une couleur, elle sera recoupée selon la forme de la bordure. Le comportement de recoupe est contrôlé par la propriété background-clip.
La propriété border-top-left-radius accepte une ou deux valeurs, chacune spécifiée comme une <longueur> ou un <pourcentage>. Lorsqu'une seule valeur est utilisée, elle définit à la fois le rayon horizontal et le rayon vertical de l'ellipse. Lorsque deux valeurs sont utilisées, la première définit le rayon horizontal et la seconde définit 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.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non |
| Animable | Oui. Le rayon de la bordure est animable. |
| 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 le rayon horizontal et le rayon 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>Résultat
Dans l'exemple suivant, 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 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>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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| length | Définit l'arrondi du coin supérieur gauche. | Tester » |
| % | Définit l'arrondi du coin supérieur gauche en pourcentage. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'border-top-left-radius' en CSS ?