La construction d'un site Web accrocheur n'est pas une tâche facile, un développeur doit essayer plusieurs choses pour créer un site Web attrayant comme différents arrière-plans, styles, frontières, etc.

La bordure CSS peut être utilisée autour du contenu pour améliorer l'apparence du contenu. Les propriétés des frontières nous permettent de déterminer la zone frontalière d'un (s) élément (s). Une bordure peut être spécifiée avec plusieurs styles comme une ligne continue, des tirets, etc.

Cet article fournira un aperçu complet de la propriété de la largeur des frontières. Initialement, il explique comment les valeurs prédéfinies fonctionnent avec la propriété de la largeur des frontières. Et par la suite, il démontre le fonctionnement de la propriété de la largeur des frontières en utilisant certaines valeurs spécifiées.

Propriété de la largeur des frontières

La propriété de la largeur des frontières détermine la largeur de la frontière d'un élément. Il spécifie la largeur de la frontière dans les quatre directions i.e. en haut, en bas, à droite et à gauche. Chaque valeur attribuée à la propriété de largeur de bordure sera spécifiée de toutes les parties.

Syntaxe
La syntaxe de la propriété de la largeur des frontières est décrite dans l'extrait ci-dessous:

largeur de bordure: taille;

La taille de largeur peut être spécifiée en utilisant certaines valeurs prédéfinies comme épais, mince, moyen ou sous forme de pixels, de points, de centimètres, etc.

Voyons que certains exemples ont une compréhension profonde de la propriété de la largeur des frontières dans CSS.

Comment affecter la largeur des frontières en utilisant des valeurs prédéfinies

Dans CSS, nous pouvons spécifier la taille de la bordure en utilisant les valeurs prédéfinies telles que le milieu épais, mince.

Exemple
Le morceau de codes en dessous définit la taille de la bordure de

, et

élément utilisant des valeurs prédéfinies:

CSS

H1
Style de la frontière: solide;
largeur de bordure: épais;

p
Style de la frontière: solide;
largeur des frontières: moyen;

Html

Largeur de bordure en utilisant des valeurs prédéfinies

Premier paragraphe

La deuxième paragraphe

Il produira la sortie suivante:

Comment ajouter la largeur des frontières en utilisant des valeurs spécifiques

Dans CSS, nous pouvons attribuer une taille spécifique pour définir la largeur de la bordure (i.e. PX, CM, etc.).

Exemple
Le code suivant définit la largeur de bordure de

élément en px et largeur de bordure de

en CM:

CSS

H1
Style de la frontière: solide;
largeur de bordure: 0.1cm;

p
Style de la frontière: solide;
largeur de bordure: 1px;

Html

Largeur de bordure en utilisant des valeurs prédéfinies

Premier paragraphe

La deuxième paragraphe

Nous obtiendrons la sortie suivante pour le code ci-dessus:

Comment attribuer des largeurs latérales spécifiques

Dans CSS, des largeurs latérales spécifiques peuvent être attribuées à la propriété de largeur de bordure. Par défaut, la propriété de largeur de bordure définit la largeur de la bordure égale aux quatre côtés. Cependant, nous pouvons spécifier la largeur de chaque côté en haut, à droite, à fond et à l'ordre de gauche.

Exemple
Cet exemple attribue quatre valeurs à la propriété de largeur d'arrière-plan la première pour la bordure supérieure, deuxième pour la bordure droite, troisième pour le bas et la dernière pour la bordure de gauche:

CSS

H1
Style de la frontière: solide;
largeur de bordure: 0.3cm 0.2cm 0.dix.2;

p
Style de la frontière: solide;
largeur de bordure: 3px 2px 1px 1px;

Hmtl

Largeur de bordure en utilisant des valeurs prédéfinies

Premier paragraphe

La deuxième paragraphe

Le code ci-dessus produira la sortie suivante:

Exemple 2
Cet exemple attribue deux valeurs à la propriété de largeur d'arrière-plan:

• La première valeur spécifie la taille du haut et du bas
• La deuxième valeur spécifie la taille du côté gauche et droit

CSS

H1
Style de la frontière: solide;
largeur de bordure: 0.2cm 0.1cm;

p
Style de la frontière: solide;
largeur de bordure: 2px 1px;

Html

Largeur de bordure en utilisant des valeurs prédéfinies

Premier paragraphe

La deuxième paragraphe

Le code donné ci-dessus montre la sortie suivante:

Une différence claire dans les côtés (en bas, en bas) et (gauche, droite) peut être noté dans la sortie.

Conclusion

La propriété de la largeur des frontières définit les quatre frontières d'un élément. Si la propriété de la largeur des frontières a une valeur, elle définira la même bordure sur les quatre côtés. En cas de deux valeurs, la première valeur se réfère au «haut et en bas», et le deuxième fait référence aux frontières «gauche et droite». S'il y a trois valeurs, se réfère d'abord à la frontière supérieure, le deuxième fait référence à la frontière gauche et droite, tandis que la troisième se réfère à la frontière inférieure. S'il y a quatre valeurs, l'ordre tourne dans le sens horaire I.e. en haut, à droite, en bas, à gauche.

Cet article a présenté une ligne directrice pour définir la largeur des bordures en utilisant des valeurs prédéfinies et des valeurs spécifiées. Ensuite, cet article a expliqué comment définir une taille de bordure unique pour chaque côté.