Proprietà CSS border-bottom-color

La proprietà CSS border-bottom-color imposta il colore solo del bordo inferiore di un elemento. È una delle quattro proprietà di colore per singolo lato, insieme a border-top-color, border-right-color e border-left-color.

Un bordo ha tre ingredienti: uno stile, una larghezza e un colore. Un bordo è invisibile finché non gli viene assegnato uno stile, quindi border-bottom-color da sola non produce alcun effetto. Prima (o insieme a essa) è necessario dichiarare uno stile tramite border-style o border-bottom-style — altrimenti lo stile predefinito è none e nessun bordo viene disegnato, indipendentemente dal colore impostato.

Quando usarla

Usa border-bottom-color quando vuoi colorare solo il bordo inferiore lasciando gli altri tre lati invariati. Casi d'uso comuni:

Intestazioni e link con stile sottolineatura — un bordo inferiore che cambia colore al passaggio del mouse (:hover) o al focus (:focus) senza spostare il layout (a differenza di text-decoration).
Barre di navigazione a schede e stati attivi — un bordo inferiore colorato indica la scheda selezionata.
Ricolorazione di un lato di un bordo uniforme — imposta tutti e quattro i lati con la shorthand border-color, poi sovrascrive il bordo inferiore con border-bottom-color.

Il valore predefinito è currentColor, il che significa che se non viene impostato alcun colore, il bordo assume il colore del testo dell'elemento. Il colore del bordo inferiore può essere impostato anche come parte della shorthand border-color (il suo terzo valore) o della shorthand border-bottom.

Valore iniziale	currentColor
Si applica a	Tutti gli elementi.
Ereditata	No
Animabile	Sì. Il colore del border-bottom è animabile.
Versione	CSS1.
Sintassi DOM	object.style.borderBottomColor = "blue";

Sintassi

Sintassi della proprietà CSS border-bottom-color

border-bottom-color: color | transparent | initial | inherit;

Esempio della proprietà border-bottom-color:

Esempio della proprietà CSS border-bottom-color con valore colore

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: solid;
        border-bottom-color: #1c87c9;
        border-bottom-width: 5px;
      }
    </style>
  </head>
  <body>
    <h2> A heading with a solid blue bottom border</h2>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà border-bottom-color, in cui i colori vengono applicati a diversi elementi HTML per mostrare l'effetto del colore:

Esempio della proprietà CSS border-bottom-color con la proprietà border-style

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom-style: groove;
        border-bottom-color: #8ebf42;
        border-bottom-width: 5px;
      }
      div {
        border-style: inset;
        border-bottom-color: #ccc;
        border-bottom-width: 8px;
      }
      p {
        border-style: double;
        border-bottom-color: #1c87c9;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a groove green bottom border.</h2>
    <div>A div element with an inset gray bottom border.</div>
    <p>A paragraph with a double blue border.</p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà border-bottom-color con il valore "transparent":

Esempio della proprietà CSS border-bottom-color con valore transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: #666 dashed;
        border-bottom-color: transparent;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of transparent border-bottom-color</h2>
    <div>This is an example of a div element which has a transparent border-bottom-color.</div>
  </body>
</html>

Provalo tu stesso »

Si noti che transparent non equivale all'assenza di un bordo: il bordo inferiore occupa comunque lo spazio definito da border-bottom-width, ma è semplicemente invisibile. Questo è utile per riservare spazio nel layout che viene rivelato al passaggio del mouse o al focus.

È possibile impostare come valore della proprietà border-bottom-color codici esadecimali, RGB, RGBA, HSL, HSLA o nomi di colore.

Suggerimento

Scopri di più sui Colori HTML.

Esempio della proprietà border-bottom-color con il valore "color":

Esempio della proprietà CSS border-bottom-color con valori esadecimali, RGB, HSL e nomi di colore

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 5px solid #666;
        width: 60%;
        padding: 5px;
      }
      .name {
        border-bottom-color: lightblue;
      }
      .hex {
        border-bottom-color: #1c87c9;
      }
      .rgb {
        border-bottom-color: rgba(0, 0, 0, 0.15);
      }
      .hsl {
        border-bottom-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Bottom border with a named color.</p>
    <p class="hex">Bottom border with a hexadecimal value.</p>
    <p class="rgb">Bottom border with a RGB color value.</p>
    <p class="hsl">Bottom border with a HSL color value.</p>
  </body>
</html>

Provalo tu stesso »

Attenzione

border-bottom-color accetta un singolo valore di colore. Se si elencano più colori, viene utilizzato solo il primo valido. Per colorare tutti e quattro i lati contemporaneamente, usa invece la shorthand border-color.

Valori

Valore	Descrizione	Prova
color	Indica il colore del bordo inferiore. Il colore predefinito è il colore dell'elemento. È possibile utilizzare nomi di colore, codici colore esadecimali, rgb(), rgba(), hsl(), hsla(). Valore obbligatorio.	Prova »
transparent	Indica che il colore del bordo deve essere trasparente. Il bordo inferiore occuperà comunque lo spazio definito dal valore border-width.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento padre.

Proprietà correlate

border-bottom — shorthand per la larghezza, lo stile e il colore del bordo inferiore in una sola dichiarazione.
border-bottom-style e border-bottom-width — gli altri due elementi necessari per un bordo inferiore.
border-color — imposta il colore di tutti e quattro i lati contemporaneamente.
border-top-color, border-right-color, border-left-color — colora gli altri tre bordi.

Esercitazione

Pratica

Cosa fa la proprietà 'border-bottom-color' in CSS?

Imposta il colore del bordo superiore di un elementoModifica lo spessore del bordo inferiore di un elementoImposta il colore del bordo inferiore di un elementoModifica lo stile del bordo inferiore di un elementoModifica il colore del testo all'interno di un elemento