I bordi e i contorni CSS sono strumenti preziosi per i web designer che cercano di aggiungere stile a un sito. Sono facili da usare una volta che sai come funzionano e sono abbastanza versatili da soddisfare un'ampia gamma di esigenze. Diamo un'occhiata ai bordi CSS per vedere da dove iniziare.

Qual è la differenza tra un bordo e un contorno nei CSS?

I contorni e i bordi CSS formano due degli strati esterni di il modello a scatola CSS, seduto tra confini e margini. Sebbene queste proprietà siano simili, hanno valori e scopi diversi.

Per prima cosa, i contorni CSS si trovano al di fuori dei bordi. Ciò significa che possono sovrapporsi a contenuti esterni all'elemento a cui li applichi. Insieme a questo, i bordi CSS cambiano le dimensioni di un elemento ma i contorni no.

Se hai difficoltà a visualizzare gli stili di bordo e contorno, puoi usare il tuo strumenti di sviluppo del browser per eseguire il debug loro.

Valori delle proprietà condivise del bordo e del contorno CSS

Nonostante le loro differenze, i bordi e i contorni CSS condividono alcuni dei loro valori. Anche la scorciatoia che usi per ognuno è molto simile.

instagram viewer

Scorciatoia per bordi e contorni CSS

Come altre proprietà CSS complesse, sia i bordi che i contorni hanno una scorciatoia disponibile. Entrambe queste proprietà condividono lo stesso formato per le loro opzioni di abbreviazione e sembra così.

confine: larghezzastilecolore;
contorno: larghezzastilecolore;

Questo crea regole che assomigliano a questa quando sono in azione. Naturalmente, però, questa scorciatoia non copre tutti i valori disponibili per queste proprietà.

bordo: 10px blu fisso;
contorno: 20px rosso fisso;

Queste regole di bordo e contorno CSS abbreviate danno come risultato un sottile bordo blu con uno spesso contorno rosso.

Come altre proprietà CSS abbreviate, puoi anche utilizzare singole proprietà per ottenere gli stessi risultati.

Larghezza del bordo CSS e larghezza del contorno

Le larghezze dei bordi e dei contorni sono valori di proprietà CSS facoltativi che impostano lo spessore dei bordi e dei contorni utilizzati. Il formato per queste proprietà è lo stesso.

larghezza del contorno: 20px;
larghezza del bordo: 10px;

I bordi consentono di impostare singole larghezze per ogni lato dell'elemento, ma i contorni no. Puoi leggere di più su questo nelle sezioni seguenti.

Stile bordo CSS e stile contorno

I bordi e i contorni CSS sono disponibili in una varietà di stili. I bordi solidi sono i più comuni, ma puoi essere creativo con il modo in cui usi bordi e contorni.

stile del bordo: solido;
stile contorno: punteggiato;

Puoi trovare un elenco completo dei diversi stili di bordi e contorni CSS alla fine di questo articolo.

Colore del bordo CSS e colore del contorno

Come con altre proprietà CSS basate sui colori, bordi e contorni accettano tutti i colori legali CSS. Ciò include codici esadecimali, codici RGB, colori abbreviati e altro.

colore del bordo: blu;
contorno-colore: #ff0000;

Puoi anche utilizzare sfumature di colore quando lavori con bordi e contorni CSS.

Valori delle proprietà del bordo CSS

Insieme ai loro valori di proprietà condivisi, i bordi e i contorni hanno anche valori unici da esplorare. I bordi CSS hanno due proprietà uniche che vale la pena imparare.

Raggio del bordo CSS

L'aggiunta di un raggio al bordo di un elemento ti dà molto controllo sulla sua forma. Ogni angolo di un elemento può avere un raggio diverso e questa proprietà può essere impostata anche quando border-style è impostato su none.

bordo-raggio: 20px;

È possibile impostare un singolo valore per modificare il raggio di tutti gli angoli.

Puoi anche dividere gli angoli in gruppi in alto a sinistra/in basso a destra e in alto a destra/in basso a sinistra.

bordo-raggio: 10px 20px;

Ciò semplifica la creazione di forme interessanti con i tuoi elementi HTML.

Infine, puoi impostare ogni angolo in modo che abbia il proprio raggio.

bordo-raggio: 10px 20px 30px 40px;

Questi valori si applicano in senso orario partendo dall'angolo in alto a sinistra.

Proprietà lato bordo CSS

A differenza dei contorni, puoi impostare ciascun lato di un bordo in modo che abbia un valore univoco per molte delle sue proprietà. Ciò rende possibile dare a ciascun lato del tuo elemento una larghezza diversa.

larghezza del bordo sinistro: 10px;
larghezza-bordo-destra: 20px;
larghezza bordo superiore: 30px;
larghezza del bordo inferiore: 40px;

Puoi anche impostare stili di bordo CSS indipendenti per ciascun lato di un elemento.

border-left-style: solido;
border-right-style: punteggiato;
border-top-style: tratteggiato;
stile bordo inferiore: Doppio;

E puoi cambiare il colore di ciascun lato se lo desideri.

stile bordo sinistro: blu;
bordo-destra-stile: #ff0000;
stile bordo superiore: #00ff00;
stile bordo inferiore: rgb (0, 0, 255);

I lati del bordo CSS funzionano con la normale abbreviazione per combinarsi in questo modo.

border-left: 10px blu fisso;
bordo-destra: 20px punteggiato #00ff00;
bordo superiore: 30px tratteggiato #ff0000;
bordo inferiore: 40px Doppiorgb(0, 0, 255);

Valori delle proprietà del profilo CSS

Come i bordi CSS, i contorni hanno una proprietà univoca; contorno-offset.

Scostamento del contorno CSS

L'aggiunta di un offset a un contorno crea uno spazio tra esso e l'elemento principale. Questo offset deve essere lo stesso per ogni lato del contorno e la proprietà accetta solo un valore.

contorno-offset: 10px;

Questo può essere un modo accurato per utilizzare un terzo bordo per i tuoi elementi che corrisponde al colore di sfondo.

Stili di bordo e contorno CSS

Sia i bordi che i contorni hanno bisogno di uno stile per funzionare. Ci sono dieci stili disponibili tra cui scegliere, compresi i bordi che non vengono visualizzati affatto.

stile del bordo: solido;
stile del bordo: punteggiato;
stile del bordo: tratteggiato;
stile del bordo: scanalatura;
stile del bordo: cresta;
stile del bordo: Doppio;
stile del bordo: inserto;
stile bordo: inizio;
stile bordo: nascosto;
stile del bordo: nessuno;

I bordi condividono gli stessi stili con i contorni, solo con outline-style impostato come proprietà.

Come utilizzare bordi e contorni CSS

Contorni e bordi sono ottimi strumenti di progettazione per i creatori di siti web. Puoi definire l'aspetto del tuo sito web con queste proprietà CSS, ma dovrai essere creativo.