border-top-left-radius |
Rayon de la bordure de haut à gauche |
| CSS3 |
|
Syntaxe
|
border-top-left-radius: longueur|pourcentage%|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| longueur |
Ce paramètre permet d'indiquer le nombre de pixels du rayon du coin supérieur gauche. |
| pourcentage% |
Ce paramètre permet d'indiquer le pourcentage du rayon du coin supérieur gauche. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer la forme de la bordure dans le coin supérieur gauche.
Remarques
- Définition du rayon de la bordure supérieure gauche : La propriété border-top-left-radius permet de définir le rayon de courbure de la bordure en haut à
gauche d'un élément. Cela signifie qu'elle arrondit le coin supérieur gauche de l'élément, en modifiant sa forme pour la rendre plus fluide et visuellement attrayante. Cette
propriété est couramment utilisée dans les conceptions modernes pour adoucir les angles des boîtes et des boutons.
- Valeurs possibles : La valeur de border-top-left-radius peut être spécifiée en pixels (px), en pourcentage (%), ou en d'autres unités de mesure. Par exemple,
border-top-left-radius: 10px; crée un arrondi de 10 pixels au coin supérieur gauche. L'utilisation de pourcentages permet des effets d'arrondi plus dynamiques, comme
border-top-left-radius: 50%; pour obtenir des coins entièrement ronds.
- Valeur de 0 pour des coins anguleux : Si la valeur de border-top-left-radius est définie sur 0, cela signifie que le coin supérieur gauche restera
anguleux, sans arrondi. Cette approche peut être utilisée lorsqu'un design plus carré ou anguleux est nécessaire, tout en conservant la possibilité d'arrondir d'autres coins
de l'élément.
- Utilisation combinée avec d'autres coins : border-top-left-radius peut être utilisée en combinaison avec les autres propriétés de bordure pour arrondir
d'autres coins d'un élément. Par exemple, vous pouvez arrondir uniquement le coin supérieur gauche avec border-top-left-radius, tout en laissant les autres coins carrés
ou avec des rayons différents, offrant ainsi une personnalisation détaillée de l'apparence.
- Contrôle du rayon horizontal et vertical : La propriété permet de définir des rayons différents pour l'axe horizontal et vertical du coin. Par exemple,
border-top-left-radius: 10px 20px; arrondira le coin supérieur gauche avec un rayon de 10 pixels horizontalement et 20 pixels verticalement, créant un effet d'arrondi
plus ovale que circulaire.
- Compatibilité avec les autres propriétés de bordure : L'utilisation de border-top-left-radius fonctionne très bien lorsqu'elle est combinée avec d'autres
propriétés de bordure, telles que border, border-top, ou border-left. Vous pouvez appliquer des bordures spécifiques sur un côté de l'élément tout en arrondissant les coins pour
créer des effets visuels intéressants, comme des boutons avec un effet d'ombre ou des boîtes de dialogue.
- Création de formes complexes : En utilisant border-top-left-radius avec d'autres propriétés de bordure et de rayon, vous pouvez créer des formes plus complexes,
telles que des boîtes ou des éléments d'interface utilisateur avec des coins arrondis asymétriques. Cela est souvent utilisé dans la création de cartes, de boutons ou de conteneurs
ayant des designs plus doux et plus modernes.
- Accessibilité et impact visuel : L'arrondissement des coins avec border-top-left-radius peut rendre un élément plus visuellement attrayant et plus facile à
interagir. Dans des interfaces où des éléments sont séparés ou alignés de manière stricte, les coins arrondis peuvent adoucir l'interface et améliorer l'expérience utilisateur, en
particulier pour les éléments interactifs comme les boutons ou les champs de formulaire.
Dernière mise à jour : Dimanche, le 20 décembre 2015
