Côtés frontaliers en CSS
- styliser les côtés des frontières individuelles dans CSS
- styliser plusieurs côtés de la frontière dans CSS
Comment coiffer les côtés de la frontière en CSS
Cette section contient l'utilisation de la propriété Side Borders dans plusieurs scénarios.
Comment styliser une bordure de bordure dans CSS
Cette section pratique les propriétés nommées de style frontière, de style border-gauche, de style border border et de style border.
border-top-style: valeur; // pour style la bordure supérieureBorder-Right-style: valeur; // pour coiffer la bordure droite
Border-Bottom-style: Valeur; // à la bordure de la bordure inférieure
Border-Left-style: valeur; // pour coiffer la bordure gauche
La valeur des propriétés ci-dessus peut être pointillée, pointillée, solide, double, rainure, etc.,
Le code fourni ci-dessous utilise les propriétés indiquées ci-dessus.
la propriété de style border
la propriété de style droite
la propriété de style border
la propriété de style frontalière
Le code est expliqué comme,
- Quatre classes CSS sont créées nommées «TOP», «Droite», «Bottom» et «gauche»
- Chaque classe est associée à des propriétés différentes comme la classe «Top» utilise.
- Ces classes CSS sont ensuite intégrées dans quatre paragraphes différents
Sortir:
Comment définir le même style pour tous les côtés de la bordure
Vous devez mentionner un seul motif de style dans la propriété de style frontière de CSS. Pour plus de facilité, nous avons écrit la syntaxe de cette propriété spécifique des frontières:
style border: valeur;Le code suivant définit le style de chaque côté de la bordure à solide.
Bienvenue à Linuxhint
L'image de code est fournie ci-dessous:
Sortir:
Comment régler le même style pour les côtés de la frontière opposés
Pour ce faire, la syntaxe suivante vous aiderait.
Style de bordure: valeur1 valeur 2;La valeur1 modifiera le style des bordures supérieure et inférieure tandis que Value2 fait référence au bas gauche et à droite.
Le code suivant pratique cette propriété styliste de CSS:
Bienvenue à Linuxhint
Les bordures supérieure et inférieure seraient conçues en solide alors que les bordures droites, les bordures gauche seront parsemées.
L'image du code est fournie ci-dessous:
Sortir:
Comment coiffer la bordure en utilisant trois valeurs
Si le nombre de valeurs est de trois, alors les premières et 3e valeurs styliseraient le haut et le bas alors que la 2ème valeur appartient aux côtés droite / gauche.
Style de bordure: valeur1 valeur2 valeur3;Valeur1 pour le haut, la valeur2 pour le bas et la valeur3 pour les styles gauche / droite le côté inférieur. L'exemple suivant utilise la syntaxe ci-dessus pour styliser trois côtés de bordure:
Bienvenue à Linuxhint
Le code stylise les bordures en haut, à droite et en bas à solide, pointillé et anéanti respectivement.
Sortir:
Comment définir différents styles pour chaque côté de la bordure
La syntaxe suivante aide à modifier le style de bordure de chaque côté.
Style de bordLa valeur1 et la valeur3 se réfèrent aux bordures supérieure et inférieure tandis que la valeur 2 et la valeur 4 sont pour le bas et le bas de gauche.
Le code suivant pratique pour styliser tous les côtés de la frontière dans CSS.
Bienvenue à Linuxhint
Le code ci-dessus modifie le style du haut et du bas en solide et en pointillé. Cependant, les bordures droite et gauche seront coiffées et solides respectivement.
L'image du code ci-dessus est fournie ci-dessous:
Sortir:
Conclusion
Les éléments de HTML peuvent être enfermés dans une frontière et les côtés de la frontière peuvent être manipulés en utilisant les différentes propriétés du CSS. Cet article fournit la démonstration des bords frontaliers dans CSS. Les côtés de la frontière peuvent être en pointillés, en pointillés ou solides. Vous pouvez définir le même style pour toutes les bordures, différents styles pour toutes les bordures ou définir le même style pour le haut / en bas et la droite / gauche. Pour de meilleures compréhensions, nous avons également fourni les exemples qui illustrent les scénarios ci-dessus.