CSS border-bottom-width
La proprietà CSS border-bottom-width definisce la larghezza del bordo inferiore
La proprietà border-bottom-width consente di definire la larghezza del bordo inferiore di un elemento. È possibile utilizzare valori fissi come **px** o **em**, oppure parole chiave come **thin**, **medium** o **thick** per avere un controllo più semplificato sulla larghezza del bordo.
Sintassi
Significato dei valori principali:
-
length: valore numerico con unità di misura (ad esempio,
5px,1em, ecc.). -
thin: larghezza del bordo inferiore sottile.
-
medium: larghezza del bordo inferiore di larghezza media (è il valore predefinito se non viene specificato altro).
-
thick: larghezza del bordo inferiore spessa.
Esempio proprietà: border-bottom-width
Codice Esempio: border-bottom-width
.border-bottom-width-example {
border-bottom-width: 10px; /* Impostiamo la larghezza del bordo inferiore */
border-bottom-style: solid; /* Impostiamo lo stile del bordo inferiore */
border-bottom-color: #50a14f; /* Impostiamo il colore del bordo inferiore */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Risultato: border-bottom-width
Esempio di utilizzo di border-bottom-width
In questo esempio, la proprietà border-bottom-width viene utilizzata per definire la larghezza del bordo inferiore di un elemento:
CSS per l'elemento con bordo inferiore:
<style>
.border-bottom-width-example {
width: 300px;
height: 150px;
border-bottom-width: 10px; /* Larghezza del bordo inferiore */
border-bottom-style: solid; /* Stile del bordo inferiore */
border-bottom-color: #50a14f; /* Colore verde del bordo inferiore */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
box-sizing: border-box; /* Per includere bordo e padding nella dimensione totale */
}
</style>
<div class="border-bottom-width-example">
Bordo inferiore con larghezza personalizzata
</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.192
