Proprietà CSS border-bottom-style – Tutti i valori con esempi

La proprietà CSS border-bottom-style imposta lo stile della linea del bordo inferiore di un elemento — se viene disegnato come una linea continua, una serie di trattini, un solco 3D e così via. Controlla solo il bordo inferiore, lasciando invariati gli altri tre lati.

Utilizza questa proprietà quando vuoi stilizzare un solo lato in modo indipendente — ad esempio, un divisore a stile sottolineatura sotto un'intestazione, o una riga tratteggiata nella parte inferiore di una scheda. Quando vuoi lo stesso stile su tutti e quattro i lati, la sintassi abbreviata border-style è più concisa.

La proprietà border-bottom-style non ha alcun effetto visibile da sola a meno che non siano presenti anche un colore e uno spessore del bordo. Abbinala a border-bottom-width e border-bottom-color, oppure imposta tutto contemporaneamente con la sintassi abbreviata border-bottom. L'eccezione è none (il valore predefinito), che rimuove completamente il bordo indipendentemente dallo spessore o dal colore.

Informazione

La specifica CSS non definisce come i bordi di stili diversi si connettono agli angoli, quindi i lati adiacenti con stili diversi possono unirsi in modi specifici del browser.

Valore iniziale	`none`
Si applica a	Tutti gli elementi.
Ereditato	No.
Animabile	No.
Versione	CSS1
Sintassi DOM	`object.style.borderBottomStyle = "dotted";`

Sintassi

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Valori

Valore	Descrizione
`none`	Nessun bordo viene disegnato. Valore predefinito.
`hidden`	Stesso risultato visivo di `none` sugli elementi normali, ma sopprime i bordi adiacenti nella risoluzione dei conflitti di bordo nelle tabelle.
`dotted`	Una serie di punti tondi.
`dashed`	Una serie di brevi trattini.
`solid`	Una singola linea continua.
`double`	Due linee continue parallele. Lo spessore combinato più lo spazio equivale al valore di `border-bottom-width`.
`groove`	Un effetto 3D che fa sembrare il bordo inciso nella pagina. L'opposto di `ridge`.
`ridge`	Un effetto 3D che fa sembrare il bordo sollevato sopra la pagina. L'opposto di `groove`.
`inset`	Un effetto 3D che fa sembrare l'intero elemento premuto nella pagina. L'opposto di `outset`.
`outset`	Un effetto 3D che fa sembrare l'intero elemento sollevato fuori dalla pagina. L'opposto di `inset`.
`initial`	Imposta la proprietà al suo valore predefinito (`none`).
`inherit`	Eredita il valore dall'elemento padre.

Esempi

Bordi solid e dashed

I valori più comunemente usati sono solid e dashed. Qui un'intestazione ottiene un bordo inferiore solid e un div ottiene uno dashed.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: solid;
      }
      div {
        border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a solid bottom border</h2>
    <div>A div element with a dashed bottom border.</div>
  </body>
</html>

Provalo tu stesso »

Bordi double, dashed e groove

Questo esempio combina diversi valori. Nota che groove e altri stili 3D richiedono un bordo più largo (qui 8px) per essere visibili — i bordi sottili comprimono l'ombreggiatura 3D.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: double;
      }
      p {
        border-style: solid;
        border-bottom-style: dashed;
      }
      div {
        border-bottom-style: groove;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a double bottom border</h2>
    <p>A paragraph with a dashed bottom border (overrides the solid shorthand on the bottom side).</p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>

Provalo tu stesso »

Il valore `hidden`

hidden appare identico a none su un elemento normale, ma si comporta diversamente nella risoluzione dei conflitti di bordo nelle tabelle: un bordo hidden vince sempre e sopprime il bordo della cella vicina.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Border on three sides — bottom is hidden</h1>
  </body>
</html>

Provalo tu stesso »

Il valore `inset`

inset è uno stile 3D che fa sembrare la casella premuta nella pagina. L'ombreggiatura deriva dal colore del bordo, quindi è più visibile con un bordo più largo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Inset bottom border example</h1>
  </body>
</html>

Provalo tu stesso »

Il valore `outset`

outset è l'opposto di inset: fa sembrare la casella sollevata fuori dalla pagina. Insieme, inset, outset, groove e ridge sono i quattro stili di bordo 3D, e tutti e quattro dipendono dal colore del bordo per creare il loro effetto di ombreggiatura.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Outset bottom border example</h1>
  </body>
</html>

Provalo tu stesso »

Quando usare ciascun valore

solid — la scelta predefinita per la maggior parte degli elementi dell'interfaccia (schede, input, divisori).
dashed e dotted — utili per divisori secondari, target di trascinamento, o qualsiasi cosa che necessiti di un peso visivo più leggero rispetto a una linea continua.
double — utilizzato occasionalmente per intestazioni decorative; è necessario almeno 3px di larghezza per vedere entrambe le linee e lo spazio.
groove / ridge — effetti 3D classici; raramente usati nelle moderne interfacce piatte ma ancora validi.
inset / outset — possono simulare effetti di pressione dei pulsanti; considera un box-shadow al loro posto per un controllo più preciso.
hidden — principalmente uno strumento per il layout delle tabelle; evitalo su elementi non-tabella dove none è più chiaro.

Errori comuni

Uno stile di bordo da solo non produce nulla se border-bottom-width è 0 o border-bottom-color è transparent. Verifica sempre che tutte e tre le sotto-proprietà del bordo siano impostate.
Sovrascrivere la sintassi abbreviata border-bottom dopo border-bottom-style reimposta lo stile a none. L'ordine delle dichiarazioni è importante.
Il valore double richiede almeno 3px di larghezza per rendere due linee distinte.
I quattro valori 3D (groove, ridge, inset, outset) appaiono identici a ridge/groove in alcuni browser quando il colore del bordo è currentColor su uno sfondo scuro — testa sempre con un colore esplicito.

Proprietà correlate

border-bottom — sintassi abbreviata per spessore, stile e colore del bordo inferiore.
border-bottom-width — imposta lo spessore del bordo inferiore.
border-bottom-color — imposta il colore del bordo inferiore.
border-style — imposta lo stile della linea per tutti e quattro i lati contemporaneamente.
border-top-style — la proprietà equivalente per il bordo superiore.
border-left-style — la proprietà equivalente per il bordo sinistro.
border-right-style — la proprietà equivalente per il bordo destro.

Pratica

Quali dei seguenti sono valori validi per la proprietà border-bottom-style in CSS?

Sintassi

Valori

Esempi

Bordi solid e dashed

Bordi double, dashed e groove

Il valore hidden

Il valore inset

Il valore outset

Quando usare ciascun valore

Errori comuni

Proprietà correlate

Pratica

Il valore `hidden`

Il valore `inset`

Il valore `outset`