CSS Fogli Di Stile

Proprietà Per Bordi E Ombre

Stampa WhatsApp Email

Le proprietà CSS per bordi, angoli arrotondati, contorni e ombre, con esempi HTML e CSS e risultati visivi.

Prerequisiti: sintassi CSS, selettori di classe e nozioni di dimensioni e spaziature.

Le proprietà CSS per bordi e ombre

Bordi e ombre aiutano a distinguere riquadri, evidenziare contenuti e separare sezioni. Il bordo fa parte del riquadro; il contorno e le ombre aggiungono effetti visivi senza occupare spazio nel layout.

La posizione del bordo

MARGINE → BORDO → PADDING → CONTENUTO

Il padding è lo spazio tra contenuto e bordo. Il margine è lo spazio esterno. Nell’impostazione predefinita box-sizing: content-box;, un elemento con width: 200px, padding: 20px e border: 3px ha una larghezza complessiva di 246 pixel, esclusi i margini: 200 + 40 + 6.

Negli esempi usiamo box-sizing: border-box;: larghezza e altezza dichiarate comprendono padding e bordo. Il riquadro misura normalmente 240 × 140 pixel; gli esempi di cerchio e pillola modificano queste misure.

Come leggere le tabelle: ogni esempio contiene HTML, una regola CSS completa e un’anteprima isolata dagli stili del sito. La classe riquadro viene selezionata con .riquadro. Sfondo, padding e margine rendono visibili i bordi e lasciano spazio alle ombre.

1. Le proprietà fondamentali dei bordi

Un bordo si trova tra il padding e il margine. Per renderlo visibile occorre uno stile diverso da none o hidden e uno spessore maggiore di zero.

1. Le proprietà fondamentali dei bordi: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
border-styleDefinisce l’aspetto della linea. Valori comuni: solid, dashed, dotted e double. Il valore iniziale è none. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-style: dashed;
    border-width: 3px;
    border-color: #17365d;
}

Il riquadro ha un bordo blu tratteggiato. Spessore e colore sono specificati per rendere confrontabili gli esempi.

border-widthImposta lo spessore. Accetta lunghezze non negative oppure thin, medium e thick. Non accetta percentuali. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-style: solid;
    border-width: 6px;
    border-color: #17365d;
}

Il bordo è spesso 6 pixel. Lo spessore non produce un bordo visibile se border-style rimane none.

border-colorImposta il colore del bordo. Se non viene specificato, il colore iniziale è currentColor: il colore del testo dell’elemento. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-style: solid;
    border-width: 3px;
    border-color: #c0392b;
}

Il bordo è rosso. Il colore del testo non cambia.

borderProprietà abbreviata per spessore, stile e colore dei quattro lati. Le componenti omesse tornano ai valori iniziali. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border: 3px solid #17365d;
}

Con una dichiarazione otteniamo un bordo blu continuo spesso 3 pixel.

2. Lati e stili diversi

Possiamo assegnare bordi diversi ai singoli lati oppure distribuire più valori tra alto, destra, basso e sinistra.

2. Lati e stili diversi: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
border-topImposta spessore, stile e colore del solo bordo superiore. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-top: 5px solid #17365d;
}

Compare soltanto una linea sopra il contenuto.

border-rightImposta il solo bordo destro. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-right: 5px solid #c0392b;
}

Compare una linea sul lato destro.

border-bottomImposta il solo bordo inferiore. È utile, per esempio, per separare un titolo dal contenuto successivo. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-bottom: 5px solid #357c62;
}

Compare una linea sotto il contenuto.

border-leftImposta il solo bordo sinistro. Può evidenziare una citazione o un avviso. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-left: 6px solid #b76b00;
}

Compare una linea a sinistra del contenuto.

border-style: quattro valoriCon quattro valori l’ordine è alto, destra, basso, sinistra. La stessa distribuzione vale per border-width e border-color. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-width: 4px;
    border-color: #17365d;
    border-style: solid dashed dotted double;
}

I lati hanno stili differenti: continuo sopra, tratteggiato a destra, puntinato sotto e doppio a sinistra.

border-width: due valoriCon due valori, il primo riguarda alto e basso; il secondo destra e sinistra. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border-style: solid;
    border-color: #17365d;
    border-width: 6px 2px;
}

Il bordo è spesso 6 pixel sopra e sotto e 2 pixel sui lati.

3. Angoli arrotondati

border-radius arrotonda gli angoli del riquadro, anche quando non è presente un bordo visibile. Può usare lunghezze e percentuali.

3. Angoli arrotondati: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
border-radiusCon un solo valore assegna lo stesso raggio ai quattro angoli. Non modifica larghezza e altezza del riquadro. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border: 3px solid #17365d;
    border-radius: 18px;
}

I quattro angoli sono arrotondati con un raggio di 18 pixel.

border-top-left-radiusArrotonda soltanto l’angolo superiore sinistro. Esistono proprietà analoghe per gli altri tre angoli. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border: 3px solid #17365d;
    border-top-left-radius: 35px;
}

Soltanto l’angolo superiore sinistro è arrotondato.

border-radius: quattro valoriL’ordine degli angoli è superiore sinistro, superiore destro, inferiore destro, inferiore sinistro. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border: 3px solid #17365d;
    border-radius: 30px 0 30px 0;
}

Sono arrotondati due angoli opposti.

border-radius: 50%Con un riquadro quadrato produce una forma circolare. Con un rettangolo produce una forma ellittica. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    width: 140px;
    height: 140px;
    border: 3px solid #17365d;
    border-radius: 50%;
}

Larghezza e altezza uguali producono un cerchio.

border-radius: forma a pillolaUn raggio molto grande viene adattato dal browser allo spazio disponibile. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    height: 70px;
    border: 3px solid #17365d;
    border-radius: 999px;
}

Il riquadro assume una forma a pillola, con estremità arrotondate.

4. Contorno esterno: outline

Il contorno viene disegnato senza occupare spazio nel layout. Può sovrapporsi ad altri elementi. È spesso usato per rendere visibile il focus durante la navigazione con tastiera.

4. Contorno esterno: outline: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
outlineProprietà abbreviata per spessore, stile e colore del contorno. Si distingue dal bordo perché non modifica le dimensioni occupate nel layout. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border: 2px solid #17365d;
    outline: 3px dashed #b76b00;
}

Il bordo blu è circondato da un contorno arancione tratteggiato.

outline-offsetImposta la distanza tra contorno e bordo. Un valore positivo allontana il contorno; un valore negativo lo sposta verso l’interno. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    border: 2px solid #17365d;
    outline: 3px solid #b76b00;
    outline-offset: 6px;
}

Il contorno è separato dal bordo da 6 pixel di spazio.

5. Ombre del riquadro

box-shadow aggiunge un’ombra al riquadro. Non occupa spazio nel layout e non modifica le dimensioni dell’elemento. Può creare ombre esterne, interne e multiple.

5. Ombre del riquadro: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
box-shadow: spostamentoI primi due valori sono lo spostamento orizzontale e verticale. Valori positivi spostano l’ombra a destra e in basso; negativi a sinistra e in alto. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    box-shadow: 8px 8px #777777;
}

L’ombra è netta, spostata di 8 pixel a destra e in basso. Non è stata assegnata una sfocatura.

box-shadow: sfocaturaIl terzo valore è il raggio di sfocatura, non negativo. Con zero i bordi dell’ombra sono netti. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.35);
}

L’ombra è sfocata e semitrasparente. rgba indica qui un nero con opacità 0,35.

box-shadow: espansioneIl quarto valore è l’espansione: positivo ingrandisce l’ombra, negativo la restringe. È distinto dalla sfocatura. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    box-shadow: 0 0 10px 5px rgba(23, 54, 93, 0.4);
}

Un’ombra blu si estende intorno al riquadro senza spostamento orizzontale o verticale.

box-shadow: insetLa parola inset trasforma l’ombra esterna in un’ombra interna. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

L’ombra compare lungo i bordi interni del riquadro.

box-shadow: ombre multiplePiù ombre si separano con virgole. La prima elencata è disegnata sopra le successive. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.3),
        0 0 0 5px #b8d5f0;
}

Una prima ombra crea profondità; la seconda, senza sfocatura, forma un anello azzurro esterno.

6. Ombra del testo

text-shadow agisce sulle forme dei caratteri, mentre box-shadow agisce sul riquadro. Sono proprietà diverse.

6. Ombra del testo: esempi e risultati
Proprietà o valoreDescrizioneEsempio HTML e CSSRisultato
text-shadowAccetta spostamento orizzontale, spostamento verticale, sfocatura opzionale e colore. Non ha un parametro di espansione né il valore inset. HTML
<div class="riquadro">Un riquadro di esempio.</div>
CSS
.riquadro {
    width: 240px;
    height: 140px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background-color: #eef5ff;
    color: #17365d;
    font-size: 24px;
    text-shadow: 2px 2px 3px #999999;
}

L’ombra segue le lettere della frase, senza creare un’ombra intorno al riquadro.

7. Leggere la sintassi delle ombre

.scheda {
    box-shadow: 4px 6px 12px 2px rgba(0, 0, 0, 0.3);
}
ComponenteValoreSignificato
Spostamento orizzontale4pxL’ombra si sposta di 4 pixel a destra.
Spostamento verticale6pxL’ombra si sposta di 6 pixel in basso.
Sfocatura12pxRende più morbido il bordo dell’ombra.
Espansione2pxIngrandisce l’ombra prima della sfocatura.
Colorergba(0, 0, 0, 0.3)Nero con opacità pari a 0,3.

I due spostamenti sono necessari; sfocatura ed espansione sono opzionali e valgono zero se omesse. Se il colore non è specificato si usa currentColor. La parola inset può essere aggiunta per ottenere un’ombra interna.

Per rimuovere un’ombra usa box-shadow: none; oppure text-shadow: none;, in base alla proprietà interessata.

Distribuire i valori sui quattro lati

Numero di valoriEsempioDistribuzione
Unoborder-width: 2px;Tutti i lati: 2px.
Dueborder-width: 2px 4px;Alto e basso: 2px; destra e sinistra: 4px.
Treborder-width: 2px 4px 6px;Alto: 2px; destra e sinistra: 4px; basso: 6px.
Quattroborder-width: 2px 4px 6px 8px;Alto: 2px; destra: 4px; basso: 6px; sinistra: 8px.

La stessa distribuzione si applica a border-style e border-color. Per border-radius, invece, i valori seguono gli angoli a partire da quello superiore sinistro, in senso orario.

Raggi orizzontali e verticali

La barra in border-radius separa i raggi orizzontali da quelli verticali:

.riquadro {
    border-radius: 30px / 15px;
}

Ogni angolo ha un raggio orizzontale di 30 pixel e verticale di 15 pixel: l’arrotondamento è ellittico. Le percentuali dei raggi orizzontali dipendono dalla larghezza, quelle dei raggi verticali dall’altezza.

8. Contorni e navigazione con tastiera

Un contorno visibile aiuta a riconoscere il controllo che riceve il focus. Nell’esempio il pulsante mostra un contorno quando è selezionato tramite tastiera. Premi Tab fino a raggiungerlo.

HTML

<button type="button">Un pulsante di esempio</button>

CSS

button {
    margin: 20px;
    padding: 12px 18px;
    border: 2px solid #17365d;
    border-radius: 8px;
    background-color: #eef5ff;
    color: #17365d;
}

button:focus-visible {
    outline: 3px solid #b76b00;
    outline-offset: 4px;
}

Risultato interattivo

Il pulsante serve a osservare il focus e non esegue un’azione. L’ingresso nell’anteprima con Tab dipende anche dal browser.

Il focus deve rimanere riconoscibile: evita di rimuovere il contorno dei controlli senza fornire un indicatore alternativo ben visibile.

9. Esempio completo: una scheda informativa

Combiniamo un bordo leggero, angoli arrotondati e un’ombra morbida. Il bordo sinistro evidenzia la scheda senza rendere tutto il contorno pesante.

HTML

<div class="scheda"><h2>Una scheda informativa</h2><p>Bordo, angoli e ombra aiutano a distinguere questo contenuto.</p></div>

CSS

.scheda {
    margin: 20px;
    padding: 20px;
    border: 1px solid #c5d4e4;
    border-left: 6px solid #17365d;
    border-radius: 12px;
    background-color: white;
    color: #17365d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Risultato

Differenze da ricordare

ProprietàEffettoOccupa spazio nel layout?
borderDisegna il bordo intorno al padding.Sì. Con border-box è compreso nelle dimensioni dichiarate.
outlineDisegna un contorno, normalmente all’esterno del bordo.No.
box-shadowAggiunge un’ombra al riquadro.No.
text-shadowAggiunge un’ombra alle lettere.No.

Problemi frequenti

  • Il bordo non compare: verifica border-style e border-width. Scrivere soltanto border-color non è sufficiente.
  • Il riquadro diventa più grande: controlla box-sizing. Con content-box, bordo e padding si aggiungono a width e height.
  • Il bordo arrotondato non taglia il contenuto: border-radius non ritaglia automaticamente tutti gli elementi figli. Se serve, valuta overflow: hidden, tenendo conto che può nascondere anche contenuti o indicatori utili.
  • L’ombra viene tagliata: controlla se un contenitore esterno usa overflow: hidden o un altro limite di ritaglio.
  • Uno stile precedente scompare: una proprietà abbreviata come border reimposta anche le componenti omesse. Scrivere border: solid dopo aver impostato un colore può riportare quel colore a currentColor.

Per le tabelle HTML esiste anche border-collapse, che controlla se i bordi delle celle sono separati o condivisi. È una proprietà specifica delle tabelle, da approfondire insieme al loro layout.