Propriété CSS Border-Left

Bordure-gauche signifie que nous fixons la bordure sur le côté gauche de tout paragraphe ou de toute rubrique dans CSS. CSS nous fournit la propriété intégrée de la frontière à gauche. En utilisant cette propriété, nous avons réglé la bordure sur le côté gauche. Lorsque nous utilisons cette propriété dans CSS, la frontière n'apparaîtra que sur le côté gauche du paragraphe ou de la rubrique. Nous pouvons définir le type, la largeur et la couleur de la bordure dans cette propriété «à gauche». Nous avons différentes propriétés disponibles dans CSS comme «style border-gauche», «bordure-gauche» et «bordure-gauche». Au lieu d'utiliser toutes ces propriétés, nous utilisons simplement la propriété de bordure-gauche et définissons toute la largeur, le style et la couleur de cette propriété. En d'autres termes, nous pouvons dire que c'est la propriété raccourci de toutes ces propriétés.

Dans ce guide, nous utiliserons cette propriété et effectuerons différents exemples où nous utilisons cette propriété «border-gauche» dans CSS.

Exemple 1
Créez le fichier dans le code Visual Studio et choisissez la langue HTML pour créer le fichier HTML. Nous devons utiliser ce fichier pour rédiger des paragraphes et appliquer la propriété Border-gauche sur les paragraphes. Nous devons également lier notre fichier HTML au fichier CSS afin que tout le style que nous faisons sur le fichier CSS y soit appliqué.

Nous avons créé deux paragraphes dans ce code HTML et les avons nommés «P1» et «P2». Nous définissons ces noms car nous devons styliser ces paragraphes séparément dans CSS. Ces noms vous aideront lorsque nous leur appliquerons le style.

Code CSS:
Pour styliser le paragraphe un, nous utilisons le nom «P1». Ici, nous utilisons les propriétés distinctes pour régler la bordure sur le côté gauche du paragraphe. Tout d'abord, nous avons réglé la «largeur de la bordure-gauche» à «10px» pour définir la largeur de la frontière. Ensuite, nous avons réglé le «bordure-gauche» à «Magenta». Il définit la couleur de la bordure gauche du paragraphe. Nous avons également réglé le «style border-gauche» à «solide». Cela signifie que le type de la frontière est «solide». Après cela, nous avons réglé le «Color en arrière-plan» de «P1» à «Green Light». Augmentez la «taille de police» et définissez-le sur «25px» et alignez «P1» au centre. Maintenant, vient «P2», au lieu d'utiliser toutes les propriétés de la largeur, du style et de la couleur de la bordure à gauche, nous n'utilisons qu'une seule propriété qui est la propriété «Border-Left». Nous définissons les trois styles de cette propriété. Nous utilisons le même style, largeur et couleur que nous avons utilisés pour «P1». La couleur d'arrière-plan, la taille de la police et le texte-alignement sont également les mêmes que dans le «P1».

Sortir:

Dans la sortie, il n'y a pas de différence entre le paragraphe «P1» et le paragraphe «P2». Ainsi, au lieu d'utiliser des propriétés distinctes, nous donnons la priorité à la propriété unique qui est la propriété «à gauche».

Exemple n ° 2
Nous créons un titre et une classe «div» avec le nom «Border» et écrivons une ligne à l'intérieur de ce «div». Maintenant, nous devons appliquer la propriété frontalière-gauche sur la «div» fournie par le CSS.

Code CSS:
Pour le titre, nous changeons simplement la couleur de fond en «rose», puis nous passons à la classe div nommée «Border». Nous y appliquons les différentes propriétés. La largeur de cette div «frontière» est «100%» et la hauteur est «200px». La couleur de son arrière-plan est «bleu ciel clair». Après cela, nous utilisons la «bordure-gauche» et définissons le «4px» pour la largeur de la bordure gauche. Cette frontière est définie sur «pointillé» en type. Et la couleur de cette bordure de gauche est définie sur «rouge».

Sortir:
Ici, nous voyons que notre fond de cap semble être «rose» et il n'y a pas de bordure pour cette rubrique. Ensuite, nous avons une ligne que nous avons écrite dans le «div». Voici la bordure gauche de cette ligne. La frontière apparaît comme de couleur «rouge» et est parsemée. Nous avons sélectionné ces couleurs et styles dans notre code CSS.

Exemple n ° 3
Nous utilisons le même code HTML que nous avons écrit dans notre exemple précédent. Ici, dans CSS, nous avons fixé la couleur «Corail clair» pour l'arrière-plan de la tête. La «Font-Family» utilisée pour cela est «algérien». Nous utilisons le nom «Div» «Border» et fixons sa largeur à «110%» et sa hauteur à «210px». La couleur de son arrière-plan est «orange». Ici, nous avons la propriété «border-gauche». Dans cette propriété, la largeur de la frontière qui apparaît sur le côté gauche est définie sur «8px». Le type de la bordure que nous avons fixé ici est «solide». Nous devons définir la couleur de cette bordure, nous l'avons donc réglée sur «Orange».

Sortir:
La sortie montre la bordure du côté gauche en couleur verte et la largeur de cette bordure est «8px». Nous avons fixé cette frontière avec l'aide d'une propriété «Border-Left».

Exemple n ° 4
Ici, le fond de cap est «Maroon», la «Font-Family» est «Times New Roman» et la couleur de la «police» est «blanche». Maintenant, vient "div". Nous avons réglé sa «largeur» et «hauteur» à «120%» et «220px», respectivement. La couleur de l'arrière-plan pour cela est définie sur «vert clair». Encore une fois, nous utilisons la propriété «Border-Left», et cette fois, nous définissons le type sur «Double». Ce «double» apparaîtra comme des «doubles» sur le côté gauche. La couleur de cette double bordure est «noir» et est «9px» dans «largeur».

Sortir:

Exemple n ° 5
Ici, nous avons un titre, un paragraphe et un div. Nous utiliserons les différents types de bordure sur le côté gauche de tout cela en utilisant la propriété intégrée CSS.

Code CSS:
Pour le cap, le type de bordure-gauche est «solide», «5px» en largeur, et est réglé sur «vert» en couleur. Pour les paragraphes, nous utilisons à nouveau la «bordure-gauche». Cette fois, le type de cette bordure est «pointillé» et la couleur est «bleue». Le «poids de police» du paragraphe est «audacieux» et la taille de la police du paragraphe est «20px». Nous avons également un «div» dans lequel nous définissons le type de bordure gauche comme «pointillé», «4px» et «rouge» pour la «largeur» et la «couleur», respectivement.

Sortir:
La frontière gauche de l'en-tête, du paragraphe et du div apparaît dans différents types. Le cap sur la bordure gauche est vert solide. La bordure gauche du paragraphe est en pointillé et couleur bleue. La bordure gauche div est dans le double type et la couleur de cela semble être «rouge».

Exemple n ° 6
Dans notre dernier exemple, nous avons créé le «Heading», «Div», «Paragraphe» et «Span». Nous utilisons les différentes frontières sur tous ces. Nous appliquons la bordure gauche sur eux.

Code CSS:
Pour le titre, nous appliquons le «style border-gauche» qui est «en pointillé». Le «style de police» est «italique» et la couleur de l'arrière-plan est «bleu clair». Maintenant, vient "div". La bordure complète de ce type «en pointillé» et la «bordure-gauche» est «5px» dans sa largeur, «solide» dans son type et «maroon» dans sa couleur. L'arrière-plan de «Div» est défini sur «rose», «20px» de taille, et aligné dans le «centre». Après cela, nous appliquons la «bordure-gauche» sur la largeur «6px», le type «solide» et la couleur «magenta». La couleur d'arrière-plan de ce paragraphe est «vert clair». La «taille de police» que nous utilisons ici est «25px» et est alignée dans le «centre». Maintenant, nous appliquons la propriété «border-gauche» qui est utilisée pour «Span» et définissons la largeur, le type et la couleur de cette «bordure-gauche» à «9px», «double» et «jaune». Sa «taille de police» est «27px» et le texte est aligné dans le «centre».

Sortir:
Dans cette sortie, il existe différentes frontières gauche pour tous ces. Nous avons appliqué les trois styles de bordure-gauche ici qui sont «en pointillés», «solides» et «double».

Conclusion

Ce guide a exploré le concept de propriété «border-gauche» dans CSS. Après avoir lu ce guide, nous avons appris que cette propriété est la propriété raccourci de trois propriétés. Nous n'avons utilisé qu'une seule propriété au lieu d'utiliser les trois propriétés - «Border-Left-Width», «Border-Left-style» et «Border-Left-Color» - Sepatement. Ici, nous avons exploré les six exemples différents et expliqué chaque exemple de ce guide, fourni avec la capture d'écran des sorties de ces codes. Maintenant, après avoir étudié ce guide, vous pourrez utiliser cette propriété dans vos projets ou sites Web.