Guida CSS interattiva: Bordi

Q: Come faccio gli angoli arrotondati in CSS?

Usa border-radius: border-radius: 8px; arrotonda tutti e quattro gli angoli. border-radius: 50%; su un quadrato crea un cerchio, e un valore grande come 999px crea una forma a pillola. Arrotonda anche lo sfondo, pure senza bordo.

Q: Come aggiungo un bordo su un solo lato?

Usa una proprietà per lato: border-bottom: 2px solid #e5e7eb;, oppure border-inline-start per il lato dove inizia il testo, che funziona anche con le lingue scritte da destra a sinistra.

La forma abbreviata border

border disegna una linea attorno a un elemento, tra il suo padding e il suo margin. La forma abbreviata accetta tre parti in qualsiasi ordine: uno spessore, uno stile e un colore.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Parte	Proprietà singola	Valori	Predefinito
Spessore	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Stile	`border-style`	`solid`, `dashed`, `dotted`, `double` e altri	`none`
Colore	`border-color`	Qualsiasi colore	`currentColor` (il colore del testo)

Lo stile è l'unica parte che non puoi saltare. Il suo valore predefinito è none, quindi border: 2px #2563eb; non disegna proprio nulla. Se ometti il colore, il bordo prende il colore del testo dell'elemento.

Stili di bordo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double richiede almeno 3px per mostrare due linee. groove, ridge, inset e outset sfumano il colore per sembrare in 3D e cambiano leggermente da un browser all'altro. hidden sembra uguale a none; i due differiscono solo nelle tabelle con bordi collassati, di cui parla la pagina sui bordi delle tabelle HTML.

Un lato alla volta

Ogni lato ha la sua forma abbreviata (border-top, border-right, border-bottom, border-left), e ogni parte ha proprietà per lato come border-top-color. Le versioni logiche, border-inline-start e border-block-end, seguono la direzione del testo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width e border-style accettano da uno a quattro valori, nello stesso ordine in senso orario del padding: sopra, destra, sotto, sinistra.

Angoli arrotondati con border-radius

border-radius arrotonda gli angoli del bordo e dello sfondo, quindi funziona anche su elementi senza alcun bordo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Valore	Risultato
`border-radius: 8px`	Tutti gli angoli arrotondati di 8px
`border-radius: 50%`	Un cerchio su un elemento quadrato, un'ellisse su un rettangolo
`border-radius: 999px`	Una pillola: i lati corti diventano semicerchi completi
`border-radius: 8px 0`	In alto a sinistra e in basso a destra 8px, gli altri due squadrati
`border-top-left-radius: 12px`	Un solo angolo
`border-radius: 50% / 25%`	Angoli ellittici: raggio orizzontale / raggio verticale

Un figlio con uno sfondo può sporgere oltre gli angoli arrotondati del genitore. overflow: hidden sul genitore lo ritaglia seguendo la curva.

Border contro outline

Un outline sembra un bordo, ma viene disegnato fuori dal bordo e non occupa spazio, quindi aggiungerne uno non sposta mai nulla. Per questo i browser usano gli outline per gli indicatori di focus.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Occupa spazio	Sì, fa parte delle dimensioni del box	No
Per lato	Sì (`border-top`, ...)	No, tutto attorno
Segue `border-radius`	Sì	Sì, nei browser attuali
Distanza dal box	No	Sì, `outline-offset`
Uso tipico	Design	Indicatori di focus, debug

Errori comuni

Nessuno stile di bordo. border: 1px #111827; e border-color: red; non disegnano nulla. Includi solid (o un altro stile).
Un bordo che fa saltare il layout all'hover. Riserva lo spazio con un bordo trasparente, oppure usa un outline o box-shadow.
Dimenticare il bordo nella larghezza. Un elemento con width: 100% e un bordo esce dal contenitore con content-box. Usa box-sizing: border-box.
border-radius con un figlio che sporge dagli angoli. Aggiungi overflow: hidden al genitore arrotondato.
Togliere gli outline di focus con outline: none. Chi usa la tastiera ne ha bisogno; ridisegna l'outline invece di eliminarlo.

Domande frequenti

Come aggiungo un bordo in CSS?

Usa la forma abbreviata con uno spessore, uno stile e un colore: border: 2px solid #2563eb;. La parte che conta di più è lo stile: senza, lo stile del bordo è none e non viene disegnato nessun bordo.

Perché il mio bordo CSS non si vede?

Quasi sempre perché non è impostato nessuno stile di bordo. border: 2px #2563eb; o border-color: red; da soli non disegnano nulla, perché il border-style predefinito è none. Aggiungi solid, dashed o un altro stile.

Come faccio gli angoli arrotondati in CSS?

Usa border-radius: border-radius: 8px; arrotonda tutti e quattro gli angoli. border-radius: 50%; su un quadrato crea un cerchio, e un valore grande come 999px crea una forma a pillola. Arrotonda anche lo sfondo, pure senza bordo.

Come aggiungo un bordo su un solo lato?

Usa una proprietà per lato: border-bottom: 2px solid #e5e7eb;, oppure border-inline-start per il lato dove inizia il testo, che funziona anche con le lingue scritte da destra a sinistra.

Che differenza c'è tra border e outline?

Un bordo fa parte del box: occupa spazio e cambia le dimensioni dell'elemento. Un outline viene disegnato fuori dal bordo senza occupare spazio, non si può impostare per lato ed è quello che i browser usano per gli indicatori di focus. Entrambi seguono border-radius nei browser attuali.

Concetti correlati