Come regolare la larghezza del bordo usando CSS

In HTML, i bordi sono progettati per creare differenze tra due sezioni e per modellare un elemento. A tale scopo, il "confine"La proprietà di CSS viene utilizzata. Questa proprietà ti consente di regolare la larghezza, lo stile e il colore del bordo. La larghezza del bordo dipende dall'aspetto dell'elemento in cui applichiamo questa proprietà.

In questo manuale, impareremo come regolare la larghezza del confine.

Iniziamo!

Cos'è la proprietà "bordo" in CSS?

In HTML, per progettare un bordo attorno a un elemento, il "confine"La proprietà viene utilizzata. Fondamentalmente, è una proprietà abbreviata di "larghezza del bordo","stile del bordo", E "colore del bordo". Viene utilizzato per impostare la larghezza del bordo, lo stile del bordo e il colore del bordo.

La sintassi della proprietà di confine è:

Bordo: colore in stile larghezza

Ecco la descrizione dei valori indicati:

• • larghezza: Viene utilizzato per regolare la larghezza del bordo.
  • stile: È utilizzato per lo stile del bordo, come una solida, cresta o doppia.
  • colore: È usato per cambiare il colore del bordo.

IL "confine"La proprietà sarà implementata nel seguente esempio.

Esempio: creare bordo usando CSS

In questo esempio, creeremo un bordo attorno a una sezione HTML e assegneremo la classe "confine"Ad esso. All'interno della sezione, aggiungeremo un paragrafo usando il

etichetta:

"Il successo non è definitivo; il fallimento non è fatale:
È il coraggio di continuare che conta." - Winston S. Churchill

Successivamente, ci sposteremo sul CSS e regoleremo la lunghezza del bordo usando "confine" proprietà.

Qui, useremo ".confine"Per accedere alla classe che abbiamo assegnato alla sezione. Abbiamo impostato il valore della larghezza "5px", stile "solido", E colore"RGB (142, 26, 153)". Infine, il colore di sfondo della sezione è specificato come "Reg (214, 159, 181)":

.confine
Bordo: 5px Solid RGB (142, 26, 153);
Background-color: RGB (214, 159, 181);

Quando tutto è finito, eseguire il file HTML per visualizzare il seguente output:

Nota: Puoi anche aumentare o ridurre la larghezza in base alle tue preferenze.

Esempio 2: regolare la larghezza del bordo attorno a un'immagine

In questo esempio, regoleremo la larghezza del bordo attorno a un'immagine. Per fare ciò, aggiungeremo un'immagine usando il tag nel file HTML:

Ora, spostati sul file CSS e imposta la larghezza del bordo, lo stile, il colore come "10px","scanalatura","RGB (255, 0, 0)"Rispettivamente:

img
Bordo: 10px Groove RGB (255, 0, 0);

Ci darà il seguente output:

Nota: Nel "confine"Proprietà, devi sempre assegnare un valore positivo alla larghezza.

Abbiamo offerto il metodo per regolare la larghezza del bordo attorno a qualsiasi elemento.

Conclusione

In CSS, per regolare il bordo attorno a un elemento, il "confine"La proprietà viene utilizzata. È possibile aumentare e ridurre la larghezza del bordo in base all'aspetto richiesto degli elementi. In questo articolo, abbiamo spiegato come regolare la larghezza del bordo usando il "confine"Proprietà e fornirne diversi esempi.