Proprietà CSS border-right-style
La proprietà CSS border-right-style specifica lo stile del bordo destro di un elemento. Scopri tutti i valori con esempi illustrati.
La proprietà CSS border-right-style imposta lo stile della linea del bordo destro di un elemento, ad esempio solid, dashed o dotted. Il valore è una singola parola chiave scelta dallo stesso insieme disponibile per la proprietà abbreviata border-style — la differenza è che border-style applica lo stile a tutti e quattro i lati contemporaneamente, mentre border-right-style agisce solo sul bordo destro.
Questa è la controparte per-lato di border-style. Usala quando vuoi uno stile di linea diverso sul bordo destro rispetto agli altri lati — ad esempio, un divisore solido a destra di una barra laterale mentre i lati superiore, inferiore e sinistro rimangono senza bordo.
Perché il bordo potrebbe non apparire
Un bordo ha tre parti indipendenti: stile, larghezza e colore. Lo stile è l'unica parte obbligatoria — se non imposti uno stile, il browser utilizza il valore predefinito none e il bordo non viene disegnato affatto, indipendentemente da larghezza o colore impostati. Quindi border-right-style è ciò che rende effettivamente visibile il bordo destro.
La larghezza predefinita del bordo destro è medium. Modificala con border-right-width o border-width, e impostane il colore con border-right-color. Per impostare stile, larghezza e colore in un'unica dichiarazione, usa la proprietà abbreviata border-right.
Non tutti i browser rendono gli stili in modo identico. Chrome, ad esempio, renderizza i punti dotted come piccoli quadrati anziché cerchi, e la spaziatura esatta tra punti e trattini è lasciata al browser.
La specifica non definisce la quantità di spazio tra i punti e i trattini.
La specifica non definisce come i bordi di stili diversi si connettono negli angoli.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No |
| Animabile | No |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderRightStyle = "dashed"; |
Sintassi
Sintassi della proprietà CSS border-right-style
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Esempio della proprietà border-right-style:
Esempio della proprietà CSS border-right-style con i valori solid e dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-right-style: solid;
}
p {
border-right-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with solid border-right-style.</h2>
<p>A paragraph with dotted border-right-style.</p>
</body>
</html>Guarda un esempio in cui vengono utilizzati tutti i valori di stile per vedere la differenza tra di essi:
A seconda del valore di border-color, gli effetti dei valori groove, ridge, inset e outset possono cambiare.
Esempio della proprietà border-right-style con tutti i valori:
Esempio della proprietà CSS border-right-style con i valori hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #1c87c9;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-style example classes */
.b1 {
border-right-style: hidden;
}
.b2 {
border-right-style: dotted;
}
.b3 {
border-right-style: dashed;
}
.b4 {
border-right-style: solid;
}
.b5 {
border-right-style: double;
}
.b6 {
border-right-style: groove;
}
.b7 {
border-right-style: ridge;
}
.b8 {
border-right-style: inset;
}
.b9 {
border-right-style: outset;
}
</style>
</head>
<body>
<h1>Border-right-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Risultato
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| none | Definisce che non ci sarà alcun bordo. Valore predefinito. | Prova » |
| hidden | È uguale a "none" eccetto nella risoluzione dei conflitti di bordo per gli elementi tabella. | Prova » |
| dotted | Definisce un bordo punteggiato. | Prova » |
| dashed | Definisce un bordo tratteggiato. | Prova » |
| double | Definisce un bordo doppio. | Prova » |
| solid | Definisce un bordo solido. | Prova » |
| groove | Definisce un bordo scanalato 3D. Il suo effetto può essere modificato con il valore di border-color. | Prova » |
| ridge | Definisce un bordo a cresta 3D. Il suo effetto può essere modificato con il valore di border-color. | Prova » |
| inset | Definisce un bordo incassato 3D. Il suo effetto può essere modificato con il valore di border-color. | Prova » |
| outset | Definisce un bordo in rilievo 3D. Il suo effetto può essere modificato con il valore di border-color. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |
none vs hidden
Le due parole chiave hanno lo stesso aspetto su un elemento normale — entrambe non disegnano alcuna linea. La differenza si manifesta solo nelle tabelle con bordi collassati: con border-collapse: collapse, un bordo hidden prevale nella risoluzione dei conflitti di bordo e sopprime il bordo della cella adiacente, mentre none ha la priorità più bassa e viene sovrascritta da qualsiasi bordo adiacente.
Proprietà correlate
- border-right — proprietà abbreviata per larghezza, stile e colore del bordo destro.
- border-right-width e border-right-color — le altre due parti del bordo destro.
- border-style — imposta lo stile della linea di tutti e quattro i lati contemporaneamente.