Borde in CSS | Spiegato

Quando visitiamo un sito Web, a volte abbiamo assistito ad alcuni bellissimi cornici attorno al testo che migliorano l'interfaccia utente e aiutano a migliorare l'interattività del contenuto. In CSS, questi frame sono definiti come confini e svolgono un ruolo significativo nella progettazione del web. CSS fornisce più proprietà del bordo che ci consentono di impostare lo stile, la larghezza, ecc.

Questo articolo presenta un'ampia panoramica delle seguenti proprietà di frontiera:

• stile del bordo: usato per impostare lo stile del bordo come punteggiato, solido, ecc.
• colore del bordo: usato per impostare il colore del bordo come rosso, #00ff00, ecc.
• larghezza del bordo: usato per impostare la larghezza del bordo come denso, sottile, pixel, ecc.

Questo articolo spiegherà come utilizzare ciascuna delle proprietà sopra menzionate con l'aiuto di esempi.

Proprietà in stile bordo CSS

Una proprietà che determina come l'aspetto del bordo. La proprietà in stile bordo CSS fornisce i seguenti valori:

• nascosto: Imposta il bordo nascosto.
• solido: Imposta il bordo della linea solida.
• punteggiato: Specificare il bordo tratteggiato.
• tratteggiato: Imposta il bordo tratteggiato.
• Doppio: Imposta il bordo a doppia linea.
• scanalatura: determina il bordo scanalato 3D.
• cresta: set bordo della cresta 3d.
• inserto: determina il bordo dell'inserto 3D
• inizio: utilizzato per impostare il bordo dell'inizio 3D

Nota: L'effetto 3D di scanalatura, cresta, inserto e inizio dipende dal valore del colore del bordo.

Esempio Il codice seguente crea più paragrafi e implementa tutti i valori sopra menzionati per mostrare gli effetti di ciascuna proprietà in stile bordo CSS:

Html

Paragrafo con bordo nascosto

Paragrafo con bordo solido

Paragrafo con bordo tratteggiato

Paragrafo con bordo tratteggiato

Paragrafo con doppio bordo

Paragrafo con bordo scanalatura

Paragrafo con il bordo della cresta

Paragrafo con il bordo degli inserti

Paragrafo con bordo all'inizio

CSS

.Borderden-Border
imbottitura: 0;
Border in stile: nascosto;

.confine solido
imbottitura: 0;
Border in stile: solido;

.Border a tratto
imbottitura: 0;
Border in stile: punteggiato;

.bordo tratteggiato
imbottitura: 0;
Border in stile: tratteggiato;

.doppio confine
imbottitura: 0;
In stile bordo: doppio;

.Groove-Border
imbottitura: 0;
Border in stile: groove;

.Ridge-Border
imbottitura: 0;
Border in stile: Ridge;

.bordo inserto
imbottitura: 0;
Border in stile: inserto;

.Border all'inizio
imbottitura: 0;
Border in stile: inizio;

Il codice sopra genere genererà il seguente output:

Proprietà CSS Border-Color

Come indica il nome stesso, ci consente di specificare il colore del bordo. Il colore può essere specificato usando nomi di colori predefiniti, valori esadecimali, ecc. Il colore di ciascun lato può essere modificato individualmente usando proprietà a bordo bordo, bordo-top-color, bordo-sinistra e proprietà di bordo-destra.

Esempio Consideriamo il pezzo di codice di seguito che specifica il colore del bordo usando il codice esadecimale:

Html

Un semplice esempio di colore bordo.

CSS

P
Border in stile: tratteggiato;
Border-color: #00F;

Il codice sopra genere genererà il seguente codice:

Estendiamo un po 'il codice sopra per colorare ogni lato bordo in modo diverso.

Html

Un semplice esempio di colore bordo.

CSS

P
Border in stile: tratteggiato;
bordo-top-color: #00F;
bordo-colore: #f00;
bordo-colore: #000;
bordo-colore: #0f0;

Otterremo il seguente output:

Proprietà della larghezza di confine CSS

La proprietà della larghezza del confine viene utilizzata per impostare la larghezza del bordo. La proprietà della larghezza del bordo prende valori in termini di pixel o un valore predefinito come spesso, sottile, ecc.

Esempio Consideriamo il codice seguente che specifica la larghezza del bordo come 2 pixel:

Html

Un semplice esempio di larghezza di confine.

CSS

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

Otterremo il seguente output:

Proprietà CSS Border-Radius

La proprietà del raggio di confine specifica un bordo arrotondato a un elemento e la lunghezza determina la forma dei suoi angoli.

Esempio Consideriamo il pezzo di codice seguente che specifica il raggio di confine come 10 pixel:

Html

Un semplice esempio di radia di frontiera.

CSS

P
bordo: 2px solido;
raggio di confine: 10px;

Produzione

L'uscita verifica che la proprietà del raggio del bordo fornisca una forma arrotondata all'angolo del bordo:

Proprietà Shorthand Border CSS

CSS fornisce una proprietà stentata per la larghezza, lo stile e il colore del bordo che ci consente di implementare tutte queste proprietà di bordo in una singola linea.

Esempio

Nel codice di seguito, implementiamo più proprietà in un'unica riga CSS usando la proprietà stenografia:

Html

Un semplice esempio di proprietà stenografico del confine.

CSS

P
bordo: 3px blu solido;

Invece di implementare singolarmente ciascuna proprietà del bordo, il codice sopra implementa la larghezza del bordo,

L'output ha verificato che la proprietà di stenografia ha implementato con successo tutte e tre le proprietà di frontiera.

Conclusione

CSS fornisce proprietà alla larghezza dei confini, in stile bordo e bordo-colore per l'impostazione della larghezza del bordo, dello stile del bordo e del colore del bordo di un elemento HTML. Questo articolo fornisce una panoramica completa dei bordi CSS e discute su come creare un bordo, impostare il colore del bordo, modificare lo stile del bordo e impostare la larghezza del bordo con l'aiuto di esempi semplici e facili da capire.