CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS border-bottom-color

La proprietà CSS border-bottom-color definisce il colore del bordo inferiore

La proprietà border-bottom-color consente di modificare il colore del bordo inferiore di un elemento. Può essere utilizzato insieme alla proprietà border-bottom per specificare solo il colore del bordo inferiore, mantenendo invariati la larghezza e lo stile del bordo.

Sintassi

border-bottom-color: color;

Significato dei valori principali:

  • color: definisce il colore del bordo inferiore, che può essere un nome di colore, un codice esadecimale, RGB o altre notazioni di colore CSS.


Esempio proprietà: border-bottom-color


Codice Esempio: border-bottom-color

CODE: CSSpreleva codice
  1. .border-bottom-color-example {
  2.   border-bottom: 3px solid #50a14f; /* colore originale */
  3.   border-bottom-color: #ff6347; /* nuovo colore */
  4.   padding: 20px;
  5.   color: white;
  6.   font-size: 22px;
  7.   text-align: center;
  8.   border-radius: 10px;
  9. }

Contenuto Esempio: border-bottom-color

Esempio di utilizzo di border-bottom-color

In questo esempio, la proprietà border-bottom-color viene utilizzata per cambiare il colore del bordo inferiore di un elemento:


Bordo inferiore colorato

CSS e HTML per l'elemento con bordo inferiore colorato:

  
  <style>
    .border-bottom-color-example {
      width: 300px;
      height: 150px;
      border-bottom: 15px solid #50a14f; /* Imposta il bordo inferiore */
      border-bottom-color: #ff6347; /* Cambia il colore del bordo inferiore */
      padding: 20px;
      background-color: #333; /* Sfondo scuro per evidenziare il bordo */
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  <div class="border-bottom-color-example">
      Bordo inferiore colorato
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies