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
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
.border-bottom-color-example {
border-bottom: 3px solid #50a14f; /* colore originale */
border-bottom-color: #ff6347; /* nuovo colore */
padding: 20px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
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:
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
IP: 216.73.216.118
