Proprietà CSS border-top-color
La proprietà border-top-color definisce il colore del bordo superiore di un elemento. Guarda tutti i valori con esempi.
La proprietà CSS border-top-color definisce il colore del bordo superiore di un elemento. Usala quando vuoi che il lato superiore sia diverso dagli altri tre lati — ad esempio, una barra colorata di accento sopra una card o un'intestazione di sezione.
Un bordo ha tre parti: lo stile, la larghezza e il colore. La proprietà border-top-color controlla solo il colore. Da sola non produce nulla di visibile, perché il valore predefinito di border-style è none, che rimuove completamente il bordo. Devi quindi prima dichiarare uno stile per il lato superiore — usando border-style o border-top-style — prima che il colore abbia qualcosa su cui agire.
Per impostare il colore di tutti e quattro i bordi contemporaneamente anziché solo quello superiore, usa la proprietà abbreviata border-color. Le proprietà corrispondenti per gli altri lati sono border-right-color, border-bottom-color e border-left-color.
La larghezza predefinita del bordo è medium. Puoi modificarla con border-width o border-top-width.
| Valore iniziale | currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditata | No |
| Animabile | Sì. Il colore del bordo superiore è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderTopColor = "black"; |
Sintassi
Sintassi della proprietà CSS border-top-color
border-top-color: color | transparent | initial | inherit;Esempio della proprietà border-top-color:
Esempio della proprietà CSS border-top-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-top-color example</h2>
<div>Example for the border-top-color property with different top border color.</div>
</body>
</html>Risultato
Esempio della proprietà border-top-color con il valore "transparent":
Esempio della proprietà CSS border-top-color con valore transparent
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding-bottom: 8px;
text-align: center;
border: 12px groove #1c87c9;
border-top-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent top border</h2>
</body>
</html>Come valore per la proprietà border-top-color si possono usare colori in formato esadecimale, RGB, RGBA, HSL, HSLA o nomi di colore.
Esempio della proprietà border-top-color con un valore di colore nominale:
Esempio della proprietà CSS border-top-color con il valore darkred (colore nominale)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: darkred;
}
</style>
</head>
<body>
<div>Border-top-color property with a named color value.</div>
</body>
</html>Esempio della proprietà border-top-color con un valore esadecimale:
Esempio della proprietà CSS border-top-color con valore esadecimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-top-color property with a hexadecimal value.</div>
</body>
</html>Esempio della proprietà border-top-color con un valore RGB:
Esempio della proprietà CSS border-top-color con valore RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-top-color property with a RGB value.</div>
</body>
</html>Esempio della proprietà border-top-color con un valore HSL:
Esempio della proprietà CSS border-top-color con valore HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: hsl(24, 80%, 50%);
}
</style>
</head>
<body>
<div>Border-top-color property with a HSL value.</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| color | Definisce il colore del bordo superiore. Il colore predefinito è il colore dell'elemento corrente. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl(), hsla(). Valore obbligatorio. | Prova » |
| transparent | Applica un colore trasparente al bordo superiore. Il bordo superiore 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 genitore. |
Da ricordare
- Il colore da solo non basta. Poiché
border-styleha come valore predefinitonone, il bordo superiore rimane invisibile finché non si imposta uno stile (solid,dashed,groove, ecc.). Abbina sempreborder-top-colora uno stile. currentColorè il valore predefinito. Se non imposti maiborder-top-color, il bordo usa il valorecolordell'elemento. Modificare ilcolordel testo cambierà anche il colore di un bordo senza stile dichiarato.transparentriserva comunque lo spazio. Un bordo superiore trasparente mantiene la suaborder-top-width, quindi il layout non si sposta — utile per effetti hover che sostituiscono un bordo trasparente con uno visibile.- Qualsiasi formato di colore è valido. Nomi di colore, esadecimale (
#1c87c9),rgb(),rgba(),hsl()ehsla()sono tutti accettati. Usargba()/hsla()quando hai bisogno di trasparenza parziale.
Proprietà correlate
- border-top — proprietà abbreviata per larghezza, stile e colore del bordo superiore in un'unica dichiarazione.
- border-top-style e border-top-width — le altre due parti del bordo superiore.
- border-color — imposta il colore di tutti e quattro i bordi contemporaneamente.
- border-bottom-color, border-right-color, border-left-color — le proprietà di colore per lato degli altri bordi.