CSS border-top-color
La proprietà CSS border-top-color imposta il colore del bordo superiore (CSS3)
La proprietà border-top-color
consente di definire il colore del bordo superiore di un elemento. Può essere specificato in vari formati di colore, come **esadecimale**, **RGB**, **HSL**, o parole chiave.
Sintassi
Significato dei valori principali:
-
color: Imposta il colore del bordo superiore dell'elemento. Può essere una stringa di colore in formato esadecimale (
#ff6347
), RGB (rgb(255, 99, 71)
), HSL (hsl(9, 100%, 64%)
) o una parola chiave comered
,green
, ecc.
Esempio proprietà: border-top-color
Codice Esempio: border-top-color

.border-top-color-example {
width: 300px;
height: 200px;
border-top-width: 5px; /* Imposta la larghezza del bordo superiore */
border-top-color: #50a14f; /* Colore verde per il bordo superiore */
border-top-style: solid; /* Bordo superiore solido */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-top-color
Esempio di utilizzo di border-top-color
In questo esempio, la proprietà border-top-color
viene utilizzata per definire il colore del bordo superiore di un elemento:
CSS e HTML per l'elemento con bordo superiore colorato:
<style>
.border-top-color-example {
width: 300px;
height: 200px;
border-top-width: 15px; /* Imposta la larghezza del bordo superiore */
border-top-color: #50a14f; /* Colore verde per il bordo superiore */
border-top-style: solid; /* Bordo superiore solido */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-top-color-example">
Elemento con bordo superiore 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.