CSS Border

Un bordo è una linea disegnata attorno ai bordi del box di un elemento, tra il suo padding e il suo margin. I bordi sono uno dei modi più comuni per separare visivamente i contenuti, evidenziare un box o costruire elementi dell'interfaccia utente come card, pulsanti e campi di input.

Ogni bordo ha tre componenti, e quasi sempre si impostano tutti e tre:

width — lo spessore della linea (es. 2px, thin, thick).
style — l'aspetto della linea (es. solid, dashed, dotted). Questa è l'unica proprietà che deve essere presente — senza un border-style, il browser non mostra alcun bordo, anche se si impostano larghezza e colore.
color — il colore della linea (es. red, #1c87c9, rgb(0,0,0)).

È possibile impostare queste proprietà singolarmente con border-width, border-style e border-color, oppure tutte in una volta con la proprietà shorthand border. Il resto di questo capitolo illustra ciascuna opzione.

Esempio della proprietà border:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Example with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Border Width

La proprietà border-width imposta la larghezza di un bordo.

La larghezza può essere specificata in un'unità di misura come pixel (px), em o rem. Può anche essere impostata con una delle tre parole chiave predefinite: thin, medium o thick. La dimensione esatta di queste parole chiave dipende dal browser, ma thin < medium < thick.

Non è possibile usare border-width da sola — non ha effetto visibile senza un border-style, poiché lo stile predefinito è none. Impostare sempre lo stile (o usare la shorthand border) prima.

È anche possibile assegnare a border-width fino a quattro valori per dimensionare ciascun lato in modo indipendente, esattamente come border-style: un valore imposta tutti i lati, due impostano alto/basso e sinistra/destra, quattro impostano in senso orario alto, destra, basso e sinistra.

Esempio della proprietà border-width:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>

Provalo tu stesso »

Border Color

La proprietà border-color viene usata per impostare il colore di un bordo. Il colore può essere definito tramite:

nome — specifica un nome di colore, come "red"
RGB — specifica un valore RGB, come "rgb(255,0,0)"
Hex — specifica un valore esadecimale, come "#ff0000"

Non è possibile usare la proprietà "border-color" da sola: non funzionerà. Usare prima "border-style" per impostare i bordi.

Di solito, queste tre proprietà vengono scritte insieme su una sola riga.

Esempio della proprietà border-color:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>

Provalo tu stesso »

Notare l'ultimo paragrafo: quando a border-color vengono assegnati quattro valori, questi si applicano rispettivamente ai lati alto, destra, basso e sinistra in senso orario.

Border Style

La proprietà CSS border-style imposta lo stile di tutti e quattro i lati dei bordi di un elemento. I bordi sono posizionati sopra lo sfondo dell'elemento. Può avere da uno a quattro valori, consentendo a ciascun lato di avere il proprio valore. Il valore predefinito di border-style è none.

Border-style accetta i seguenti valori:

dotted
dashed
solid
double
groove
ridge
inset
outset

Ecco il significato di ciascun valore:

dotted — una serie di punti tondi.
dashed — una serie di trattini brevi.
solid — una singola linea retta. È di gran lunga lo stile più comune.
double — due linee solide parallele. La larghezza combinata è uguale al valore di border-width.
groove — il bordo appare inciso nella pagina (effetto 3D).
ridge — l'opposto di groove; il bordo sembra sporgere.
inset — fa sembrare che l'intero box sia premuto nella pagina.
outset — fa sembrare che il box sia sollevato dalla pagina.

Gli effetti groove, ridge, inset e outset dipendono dal colore del bordo, perciò risultano sottili (o invisibili) su un bordo sottile o su uno sfondo simile. Usare un border-width di almeno 3px per vederli chiaramente.

CSS Border per i lati individuali

CSS fornisce proprietà che specificano ciascun bordo (destra, sinistra, basso e alto).

La proprietà border-style può avere 4 valori, ad esempio border-style: dotted solid double dashed; dove il bordo superiore è dotted, il bordo inferiore è double, il bordo destro è solid e il bordo sinistro è dashed.

La proprietà border-style può avere 3 valori, ad esempio border-style: dotted solid double; dove il bordo superiore è dotted, il bordo inferiore è double, e i bordi destro e sinistro sono solid.

La proprietà border-style può avere 2 valori, ad esempio border-style: dotted solid; dove i bordi destro e sinistro sono solid, e i bordi superiore e inferiore sono dotted. E, naturalmente, questa proprietà può avere anche solo 1 valore, ad esempio border-style: solid; dove tutti i lati sono solid.

Esempio delle proprietà border per i lati individuali:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>

Provalo tu stesso »

CSS border come proprietà shorthand

La proprietà CSS border è una proprietà shorthand per le seguenti proprietà border individuali:

La proprietà CSS border-width, che imposta la larghezza di tutti e quattro i lati del bordo di un elemento.
La proprietà CSS border-style, che imposta lo stile di tutti e quattro i lati dei bordi di un elemento.
La proprietà CSS border-color, che imposta il colore di tutti e quattro i lati del bordo di un elemento.

Esempio della proprietà shorthand border:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>

Provalo tu stesso »

Bordi arrotondati

Usando la proprietà CSS border-radius, è possibile aggiungere bordi arrotondati a un elemento.

Esempio della proprietà border-radius:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>

Provalo tu stesso »

La differenza tra border e outline

Un border e un outline disegnano entrambi una linea attorno a un elemento, quindi è facile confonderli. Le differenze principali sono:

Un border fa parte del box model. Si trova tra il padding e il margin e occupa spazio, quindi aggiungere un bordo può spostare il layout degli elementi circostanti.
Un outline viene disegnato all'esterno del bordo e non occupa spazio, quindi non modifica mai le dimensioni o la posizione dell'elemento o dei suoi vicini.
Un border può avere stile, larghezza e colore diversi su ciascun lato. Un outline è uguale su tutti e quattro i lati.
Un outline può essere sfalsato rispetto all'elemento con outline-offset; i border non possono essere sfalsati.

Poiché gli outline non influenzano il layout, vengono comunemente usati per lo stato :focus di pulsanti e link — l'anello di focus può apparire senza spostare il resto della pagina.

Capitoli correlati

CSS border-width — controlla lo spessore di ciascun lato.
CSS border-style — tutti gli stili di linea in dettaglio.
CSS border-color — imposta i colori per ciascun lato.
CSS border-radius — arrotonda gli angoli.
CSS outline — l'alternativa al border che non impatta sul layout.
CSS padding — lo spazio all'interno del bordo.

Pratica

Quali delle seguenti sono proprietà che possono essere usate per stilizzare i bordi in CSS?

border-styleborder-colorborder-radiusborder-widthborder-font