Costruire un sito Web accattivante non è un compito facile, uno sviluppatore deve provare più cose per creare un sito Web attraente come diversi background, stili, bordi, ecc.

Il bordo CSS può essere utilizzato attorno al contenuto per migliorare l'aspetto del contenuto. Le proprietà del confine ci consentono di determinare l'area di confine di un elemento / i. Un bordo può essere specificato con più stili come una linea continua, trattini, ecc.

Questo articolo fornirà una panoramica completa della proprietà della larghezza di frontiera. Inizialmente, elabora il modo in cui i valori predefiniti funzionano con la proprietà della larghezza delle frontiere. E in seguito, dimostra il funzionamento della proprietà della larghezza di frontiera utilizzando alcuni valori specificati.

Proprietà della larghezza di frontiera

La proprietà della larghezza di frontiera determina la larghezza del bordo di un elemento. Specifica la larghezza del confine in tutte e quattro le direzioni i.e. in alto, in basso, a destra e a sinistra. Ogni valore assegnato alla proprietà della larghezza di frontiera sarà specificato su tutti i lati.

Sintassi
La sintassi della proprietà della larghezza di frontiera è descritta nello snippet di seguito:

Widdth del bordo: dimensioni;

La dimensione della larghezza può essere specificata utilizzando alcuni valori predefiniti come spessi, sottili, medi o sotto forma di pixel, punti, centimetri, ecc.

Consideriamo alcuni esempi per avere una profonda comprensione della proprietà della larghezza di frontiera in CSS.

Come assegnare la larghezza del bordo usando valori predefiniti

In CSS possiamo specificare la dimensione del bordo usando i valori predefiniti come spessi, sottili, medi.

Esempio
Il pezzo di codice di seguito dà la dimensione del bordo di

, E

Elemento usando valori predefiniti:

CSS

H1
Border in stile: solido;
Widdth del confine: denso;

P
Border in stile: solido;
Widdth di confine: medio;

Html

Larghezza del bordo usando valori predefiniti

Primo paragrafo

Secondo paragrafo

Produrrà il seguente output:

Come aggiungere la larghezza del bordo usando valori specifici

In CSS, possiamo assegnare una dimensione specifica per impostare la larghezza del bordo (i.e. px, cm, ecc.).

Esempio
Il seguente codice imposta la larghezza del bordo di

elemento in px e larghezza del bordo di

In CM:

CSS

H1
Border in stile: solido;
Larghezza di confine: 0.1 cm;

P
Border in stile: solido;
Widdth di confine: 1px;

Html

Larghezza del bordo usando valori predefiniti

Primo paragrafo

Secondo paragrafo

Otterremo il seguente output per il codice sopra:

Come assegnare larghezze laterali specifiche

In CSS, le larghezze laterali specifiche possono essere assegnate alla proprietà della larghezza del bordo. Per impostazione predefinita la proprietà della larghezza del bordo imposta la larghezza del bordo uguale su tutti e quattro i lati. Tuttavia possiamo specificare la larghezza di ciascun lato in alto, a destra, in basso e all'ordine a sinistra.

Esempio
Questo esempio assegna quattro valori alla proprietà della larghezza di fondo prima per il bordo superiore, secondo per il bordo destro, terzo per il fondo e l'ultimo per il bordo sinistro:

CSS

H1
Border in stile: solido;
Larghezza di confine: 0.3 cm 0.2 cm 0.1 0.2;

P
Border in stile: solido;
Larghezza del bordo: 3px 2px 1px 1px;

Hmtl

Larghezza del bordo usando valori predefiniti

Primo paragrafo

Secondo paragrafo

Il codice sopra produrrà il seguente output:

Esempio 2
Questo esempio assegna due valori alla proprietà della larghezza di fondo:

• Il primo valore specifica la dimensione per la parte superiore e inferiore
• Il secondo valore specifica la dimensione per il lato sinistro e destro

CSS

H1
Border in stile: solido;
Larghezza di confine: 0.2 cm 0.1 cm;

P
Border in stile: solido;
Larghezza di confine: 2px 1px;

Html

Larghezza del bordo usando valori predefiniti

Primo paragrafo

Secondo paragrafo

Il codice indicato sopra mostra il seguente output:

Una chiara differenza nei lati (in alto, in basso) e (sinistra, destra) si può notare nell'uscita.

Conclusione

La proprietà della larghezza di frontiera imposta tutti e quattro i confini di un elemento. Se la proprietà della larghezza del confine ha un valore, imposterà lo stesso bordo su tutti e quattro i lati. In caso di due valori, il primo valore si riferisce ai confini "in alto e in basso" e il secondo si riferisce ai confini "sinistra e destra". Se ci sono tre valori, prima si riferisce al bordo superiore, il secondo si riferisce al bordo sinistro e destro, mentre il terzo si riferisce al bordo inferiore. Se ci sono quattro valori, l'ordine ruoterà nella rotazione in senso orario i.e. in alto, a destra, in basso, a sinistra.

Questo articolo ha presentato una linea guida per impostare la larghezza delle frontiere utilizzando valori predefiniti e valori specificati. Successivamente questo articolo ha spiegato come impostare una dimensione del bordo unica per ogni lato.