Proprietà CSS border-right-color
La proprietà border-right-color definisce il colore del bordo destro di un elemento. Scopri tutti i valori con esempi.
La proprietà CSS border-right-color definisce il colore del bordo destro di un elemento. Permette di stilizzare il lato destro indipendentemente dagli altri tre lati, il che è utile per divisori, callout e design asimmetrici con bordi.
Un bordo ha tre componenti — larghezza, stile e colore — e tutti e tre devono essere presenti affinché il bordo venga visualizzato. Un colore da solo non produce nulla, perché un bordo senza stile ha come valore predefinito none. Pertanto, ogni volta che imposti border-right-color, assicurati che sia presente anche uno stile tramite border-style o border-right-style. La larghezza predefinita è medium; modificala con border-width o border-right-width.
Se vuoi impostare tutti i lati contemporaneamente, utilizza la proprietà abbreviata border-color, che accetta fino a quattro valori per i lati superiore, destro, inferiore e sinistro.
| Valore iniziale | currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No |
| Animabile | Sì. Il colore del bordo destro è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderRightColor = "black"; |
Sintassi
border-right-color: color | transparent | initial | inherit;Il valore è un singolo <color>, oppure una delle parole chiave CSS globali. Nota che, a differenza della proprietà abbreviata border-color, questa proprietà non accetta mai più di un valore — influisce esclusivamente sul lato destro.
Esempio della proprietà border-right-color
Nell'esempio seguente, viene applicato un bordo grigio uniforme a un box, quindi solo il lato destro viene ricolorato di blu:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-right-color example</h2>
<div>Example for the border-right-color property with different right border color.</div>
</body>
</html>Esempio con il valore "transparent"
La parola chiave transparent nasconde il colore del bordo destro mantenendo lo spazio che occupa. Questo è utile per creare frecce e triangoli, o per evitare che il layout si sposti quando un bordo viene attivato o disattivato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent right border</h2>
</body>
</html>Puoi impostare valori esadecimali, RGB, RGBA, HSL, HSLA o nomi di colori come valore per la proprietà border-right-color.
Risultato
I quattro formati di valore qui sotto producono tutti lo stesso effetto — differiscono solo nel modo in cui il colore viene scritto.
Esempio con un nome di colore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Border-right-color property with a named color value.</div>
</body>
</html>Esempio con un valore esadecimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-right-color property with a hexadecimal value.</div>
</body>
</html>Esempio con un valore RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-right-color property with a RGB value.</div>
</body>
</html>Esempio con un valore HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-right-color property with a HSL value.</div>
</body>
</html>Se ometti border-right-style (o border-style), il colore non ha alcun effetto visibile — un bordo senza stile ha come valore predefinito none e non viene visualizzato affatto.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| color | Definisce il colore del bordo destro. Il colore predefinito è il colore dell'elemento corrente. Si possono utilizzare nomi di colori, codici esadecimali, rgb(), rgba(), hsl(), hsla(). Valore obbligatorio. | Prova » |
| transparent | Applica un colore trasparente al bordo destro. Il bordo destro 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 padre. |