Proprietà CSS Border-Left

Bordo-sinistra significa che impostiamo il bordo sul lato sinistro di qualsiasi paragrafo o qualsiasi intestazione in CSS. CSS ci fornisce la proprietà integrata del bordo-sinistra. Usando questa proprietà, impostiamo il bordo sul lato sinistro. Quando usiamo questa proprietà in CSS, il bordo apparirà solo sul lato sinistro del paragrafo o sulla direzione. Possiamo impostare il tipo, la larghezza e il colore del bordo in questa proprietà "bordo-sinistra". Abbiamo proprietà diverse disponibili in CSS come "Border-Left-Style", "Border-Left-Width" e "Border-Left-Color". Invece di usare tutte queste proprietà, utilizziamo semplicemente la proprietà bordo-sinistra e impostiamo tutta la larghezza, lo stile e il colore in questa proprietà. In altre parole, possiamo dire che è la proprietà abbreviata di tutte queste proprietà.

In questa guida, useremo questa proprietà ed eseguiremo diversi esempi in cui utilizziamo questa proprietà "bordo-sinistra" in CSS.

Esempio 1
Crea il file nel codice Visual Studio e scegli la lingua HTML per creare il file HTML. Dobbiamo utilizzare questo file per scrivere paragrafi e applicare la proprietà a bordo-sinistra sui paragrafi. Dobbiamo anche collegare il nostro file HTML al file CSS in modo che tutto lo styling che facciamo sul file CSS venga applicato ad esso.

Abbiamo creato due paragrafi in questo codice HTML e li hanno chiamati "P1" e "P2". Imposta questi nomi perché dobbiamo modellare questi paragrafi separatamente in CSS. Questi nomi aiuteranno quando applichiamo loro lo stile.

Codice CSS:
Per modellare il paragrafo uno, utilizziamo il nome "P1". Qui, utilizziamo le proprietà separate per impostare il bordo sul lato sinistro del paragrafo. Innanzitutto, abbiamo impostato la "larghezza di confine-sinistra" su "10px" per impostare la larghezza del bordo. Quindi, abbiamo impostato il "bordo-colore" su "magenta". Imposta il colore del bordo sinistro del paragrafo. Abbiamo anche impostato lo "stile bordo-sinistra" su "solido". Ciò significa che il tipo di bordo è "solido". Dopo questo, abbiamo impostato il "colore di sfondo" di "P1" su "verde chiaro". Aumenta la "dimensione del carattere" e impostalo su "25px" e allinea "P1" al centro. Ora, arriva "P2", invece di utilizzare tutte le proprietà della larghezza, dello stile e del colore bordo-sinistra, usiamo solo una proprietà che è la proprietà "bordo-sinistra". Abbiamo impostato tutti e tre gli stili in questa proprietà. Usiamo lo stesso stile, larghezza e colore che abbiamo usato per "P1". Il colore di sfondo, le dimensioni dei caratteri e il testo sono gli stessi di "P1".

Produzione:

Nell'output, non vi è alcuna differenza tra il paragrafo "P1" e il paragrafo "P2". Quindi, invece di utilizzare proprietà separate, diamo priorità a una proprietà che è la proprietà "bordo-sinistra".

Esempio n. 2
Creiamo una classe e una classe "div" con il nome "bordo" e scriviamo una riga all'interno di questo "div". Ora, dobbiamo applicare la proprietà di frontiera sul "div" fornito dal CSS.

Codice CSS:
Per l'intestazione, cambiamo il colore di sfondo in "rosa" e poi passiamo alla classe Div chiamata "Border". Applichiamo le diverse proprietà ad esso. La larghezza per questo div "bordo" è "100%" e l'altezza è "200px". Il colore del suo sfondo è "Sky Blue". Successivamente, usiamo il "bordo-sinistra" e impostiamo il "4px" per la larghezza del bordo sinistro. Questo bordo è impostato su "tratteggiato" nel tipo. E il colore di questo bordo sinistro è impostato su "rosso".

Produzione:
Qui, vediamo che il nostro background intestante sembra essere "rosa" e non c'è bordo per questa intestazione. Quindi, abbiamo una linea che abbiamo scritto nel "div". Ecco il bordo sinistro di questa linea. Il bordo appare come "rosso" di colore ed è punteggiato. Abbiamo selezionato questi colori e stili nel nostro codice CSS.

Esempio n. 3
Usiamo lo stesso codice HTML che abbiamo scritto nel nostro esempio precedente. Qui, in CSS, abbiamo impostato il colore del "corallo leggero" per lo sfondo dell'intestazione. La "famiglia di carattere" usata per questo è "algerina". Usiamo il nome "div" "bordo" e impostiamo la sua larghezza su "110%" e la sua altezza su "210px". Il colore del suo sfondo è "arancione". Qui, abbiamo la proprietà "bordo-sinistra". In questa proprietà, la larghezza del bordo che appare sul lato sinistro è impostata su "8px". Il tipo di bordo che abbiamo fissato qui è "solido". Dobbiamo impostare il colore per questo bordo, quindi lo impostiamo su "arancione".

Produzione:
L'uscita mostra il bordo sul lato sinistro in colore verde e la larghezza di questo bordo è "8px". Abbiamo impostato questo confine con l'aiuto della proprietà "bordo-sinistra".

Esempio #4
Qui, lo sfondo della voce è "marrone", il "caramella-familiare" è "Times New Roman" e il colore del "carattere" è "bianco". Ora, arriva "Div". Abbiamo impostato la sua "larghezza" e "altezza" su "120%" e "220px", rispettivamente. Il colore dello sfondo per questo è impostato su "verde chiaro". Ancora una volta, utilizziamo la proprietà "bordo-sinistra" e questa volta impostiamo il tipo su "doppio". Questo "doppio" apparirà come "doppie linee" sul lato sinistro. Il colore di questo doppio bordo è "nero" ed è "9px" in "larghezza".

Produzione:

Esempio #5
Qui, ne abbiamo una voce, un paragrafo e un div. Useremo i diversi tipi di bordo sul lato sinistro di tutti questi utilizzando la proprietà incorporata CSS.

Codice CSS:
Per l'intestazione, il tipo di bordo-sinistra è "solido", "5px" in larghezza ed è impostato su "verde" di colore. Per i paragrafi, usiamo di nuovo il "bordo-sinistra". Questa volta, il tipo di questo bordo è "punteggiato" e il colore è "blu". Il "font-peso" del paragrafo è "audace" e la dimensione del carattere del paragrafo è "20px". Abbiamo anche un "Div" in cui impostiamo il tipo di bordo sinistro come "punteggiato", "4px" e "rosso" per la "larghezza" e "colore", rispettivamente.

Produzione:
Il bordo sinistro dell'intestazione, del paragrafo e del div appaia in diversi tipi. L'intestazione sul bordo sinistro è verde solido. Il bordo a sinistra del paragrafo è in tipo tratteggiato e blu colore. Il bordo a sinistra div è in doppio tipo e il colore di questo sembra essere "rosso".

Esempio #6
Nel nostro ultimo esempio, abbiamo creato "Intestazione", "Div", "Paragrafo" e "Span". Usiamo i diversi bordi su tutti questi. Applichiamo il bordo sinistro su di loro.

Codice CSS:
Per l'intestazione, applichiamo il "bordo-sinistra" che è "punteggiato". Lo "in stile carattere" per questo è "corsivo" e il colore dello sfondo è "azzurro". Ora, arriva "Div". Il bordo completo per questo è il tipo "punteggiato" e il "bordo-sinistra" è "5px" nella sua larghezza, "solido" nel suo tipo e "marrone" nel suo colore. Lo sfondo di "div" è impostato su "rosa", "20px" di dimensioni e allineato nel "centro". Successivamente, applichiamo la "bordo-sinistra" alla larghezza "6px", tipo "solido" e colore "magenta". Il colore di sfondo di questo paragrafo è "verde chiaro". La "dimensione del carattere" che usiamo qui è "25px" ed è allineata nel "centro". Ora applichiamo la proprietà "bordo-sinistra" che viene utilizzata per "span" e impostiamo la larghezza, il tipo e il colore di questo "bordo-sinistra" a "9px", tipo "doppio" e "giallo". La sua "dimensione del carattere" è "27px" e il testo è allineato nel "centro".

Produzione:
In questo output, ci sono diversi bordi sinistra per tutti questi. Abbiamo applicato i tre stili di bordo-sinistra qui che sono "punteggiati", "solidi" e "doppi".

Conclusione

Questa guida ha esplorato il concetto di proprietà "bordo-sinistra" in CSS. Dopo aver letto questa guida, abbiamo appreso che questa proprietà è la proprietà abbreviata di tre proprietà. Abbiamo usato una sola proprietà invece di utilizzare le tre proprietà: "Width-left-Width", "Border-Left-Style" e "Border-Left-Color"-separatamente. Qui, abbiamo esplorato i sei diversi esempi e spiegato ogni esempio in questa guida, fornito con lo screenshot delle uscite di tali codici. Ora, dopo aver studiato questa guida, sarai in grado di utilizzare questa proprietà nei tuoi progetti o siti Web.