IL confine è una proprietà abbreviata nei CSS, che viene utilizzata per aggiungere un bordo a un elemento. Ci permette di specificare il bordo della scatola. Imposta la larghezza, lo stile e il colore del bordo. Questa proprietà CSS include le seguenti proprietà del bordo:

larghezza del bordo:La proprietà border-width viene utilizzata per impostare la larghezza del bordo. Possiamo anche usare i valori predefiniti che sono sottile, medio, E spesso per impostare la larghezza del bordo. Imposta lo spessore del bordo. Il suo valore predefinito è medio .
Questa proprietà non può essere utilizzata da sola. Viene sempre utilizzato con altre proprietà di confine come la proprietà 'border-style' per impostare prima il bordo; in caso contrario, non funzionerà.
La larghezza del bordo può essere diversa per ogni singolo lato. Può essere fatto utilizzando la larghezza del bordo inferiore, larghezza bordo superiore, larghezza bordo destra , E larghezza del bordo sinistro .stile del bordo:Questa proprietà specifica lo stile del bordo. Definisce se il bordo è solido, punteggiato, tratteggiato, doppio, scanalato e uno degli altri valori possibili. Senza impostare questa proprietà, cioè senza impostare lo stile del bordo, nessuna delle altre proprietà del bordo funzionerà. Il bordo sarà invisibile senza specificare il stile del bordo . Questo perché il valore predefinito di questa proprietà CSS è nessuno .
Simile a larghezza del bordo , lo stile del bordo può essere diverso per ogni singolo lato. Può essere fatto utilizzando le proprietà stile bordo inferiore, stile bordo superiore, stile bordo destra , E stile border-left .colore del bordo:Ci permette di cambiare il colore del bordo. Possiamo impostare il colore utilizzando il nome del colore, il valore RGB o il valore esadecimale. Simile al larghezza del bordo E stile del bordo , possiamo cambiare il colore del bordo individualmente, cioè possiamo cambiare il colore del lato inferiore, superiore, sinistro e destro del bordo di un elemento. Può essere fatto utilizzando le proprietà colore-bordo-inferiore, colore-bordo-superiore, colore-bordo-destra , E colore del bordo sinistro .
IL colore del bordo la proprietà non può essere utilizzata da sola. Deve essere utilizzato con altre proprietà di confine come la proprietà 'border-style' per impostare il bordo; in caso contrario, non funzionerà.

confine contro contorno

Sebbene i bordi e i contorni siano molto simili, esistono alcune differenze tra contorni e bordi che sono le seguenti:

• Utilizzando un contorno, non possiamo applicare larghezza, stile e colore del contorno diversi per i quattro lati di un elemento, mentre, in un bordo, possiamo applicare il valore fornito per tutti e quattro i lati di un elemento.
• Il bordo fa parte della dimensione dell'elemento, mentre il contorno non fa parte della dimensione dell'elemento. Significa che non importa quanto spesso applichiamo un contorno all'elemento, le sue dimensioni non cambieranno.

Vediamo un esempio per comprendere la proprietà border.

Esempio

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Produzione

Ora, c'è un altro esempio in cui utilizziamo entrambi contorno E confine proprietà.

Esempio

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Produzione