Proprietà CSS border-style
La proprietà CSS border-style imposta lo stile dei quattro lati del bordo. Scopri i valori e guarda esempi pratici.
La proprietà CSS border-style imposta lo stile della linea di tutti e quattro i lati del bordo di un elemento in una sola volta — ad esempio solid, dashed o dotted. Questa pagina illustra ogni valore, come la sintassi abbreviata da uno a quattro valori si mappa su ciascun lato e le insidie da conoscere prima di usare un bordo.
border-style è una proprietà abbreviata per le quattro proprietà dei singoli lati: border-top-style, border-bottom-style, border-left-style e border-right-style.
Perché è importante
Un bordo diventa visibile solo quando ha uno stile. Questa è la trappola più comune per i principianti: se imposti border-width e border-color ma lasci border-style al suo valore predefinito none, non viene visualizzato nulla — il browser non riserva spazio e non disegna alcuna linea. Quindi border-style è di fatto l'interruttore che attiva un bordo. Nella maggior parte del codice reale si impostano tutti e tre insieme con la proprietà abbreviata border (ad es. border: 1px solid #1c87c9;), ma usare border-style direttamente è utile quando si desidera uno stile di linea diverso per ciascun lato, oppure quando si cambia solo lo stile al passaggio del mouse o al focus mantenendo la larghezza fissa (evitando così spostamenti del layout).
Il bordo viene disegnato sopra lo sfondo dell'elemento e il valore non è ereditato e non è animabile.
Come funziona la sintassi abbreviata da uno a quattro valori
border-style accetta da uno a quattro valori, in modo che ciascun lato possa avere il proprio stile:
- Un valore — applicato a tutti e quattro i lati.
- Due valori — il primo riguarda il lato superiore e inferiore; il secondo il lato sinistro e destro.
- Tre valori — il primo riguarda il lato superiore; il secondo il lato sinistro e destro; il terzo il lato inferiore.
- Quattro valori — superiore, destro, inferiore, sinistro, in ordine orario (un utile aiuto mnemonico: TRouBLe).
Una nota sul supporto dei browser: tutti i browser moderni supportano tutti i valori indicati di seguito. Gli stili 3D (groove, ridge, inset, outset) producono il loro effetto a partire dal valore di border-color, quindi risultano sottili su colori chiari e scompaiono completamente quando il colore è black o molto scuro.
| 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.borderStyle = "dotted double"; |
Sintassi
Sintassi della proprietà CSS border-style
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;Esempio della proprietà border-style:
Esempio della proprietà CSS border-style con il valore dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p> Example of dotted border-style.</p>
</body>
</html>Esempio della proprietà border-style con un valore diverso per ciascun lato:
Esempio della proprietà CSS border-style con i valori double, solid, dashed e dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p>Example, where each side has own value.</p>
</body>
</html>Risultato
Esempio della proprietà border-style con tutti i valori:
Esempio della proprietà CSS border-style con i valori hidden, double, solid, dashed, dotted, groove, ridge, inset e outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #eee;
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: #c9c5c5;
border: 8px solid #1c87c9;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-style example classes */
.b1 {
border-style: hidden;
}
.b2 {
border-style: dotted;
}
.b3 {
border-style: dashed;
}
.b4 {
border-style: solid;
}
.b5 {
border-style: double;
}
.b6 {
border-style: groove;
}
.b7 {
border-style: ridge;
}
.b8 {
border-style: inset;
}
.b9 {
border-style: outset;
}
</style>
</head>
<body>
<h1>Border-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>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| none | Non mostra alcun bordo. Valore predefinito. | Provalo » |
| hidden | Uguale a "none", tranne che nella risoluzione dei conflitti di bordo per gli elementi di tabella. | Provalo » |
| dotted | Il bordo è specificato come una serie di punti. | Provalo » |
| dashed | Il bordo è specificato come una serie di trattini. | Provalo » |
| solid | Il bordo è specificato come linee solide. | Provalo » |
| double | Il bordo è specificato come doppie linee solide. | Provalo » |
| groove | È un bordo scanalato 3D che dà l'impressione che il bordo sia inciso. Opposto di ridge. | Provalo » |
| ridge | Specifica un bordo a cresta 3D e dà l'impressione di un aspetto in rilievo. Opposto di groove. | Provalo » |
| inset | È un effetto 3D che dà l'impressione che l'elemento appaia incassato. Opposto di outset. | Provalo » |
| outset | È un effetto 3D che dà l'impressione che l'elemento appaia in rilievo. Opposto di inset. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento padre. |
Insidie comuni
- Nessuno stile significa nessun bordo. Con
border-style: none(il valore predefinito),border-widtheborder-colornon hanno effetto visibile. Imposta sempre uno stile. hiddenvsnone. Sembrano identici su un box normale. La differenza appare solo nelle tabelle: nella risoluzione dei conflitti di bordo,hiddenha la precedenza e sopprime il bordo della cella adiacente, mentrenoneha la priorità più bassa.groove,ridge,inseteoutsetrichiedono un bordo colorato e con più pixel. La loro illusione 3D è costruita da tonalità più chiare/scure diborder-color, quindi usa una larghezza di almeno2px–4pxed evita il nero o il bianco puro.- Cambiare solo
border-stylemantiene stabile la dimensione del box perché la larghezza rimane invariata — utile per gli stati hover/focus che sostituisconodashedconsolidsenza alterare il layout.
Proprietà correlate
- border — imposta larghezza, stile e colore in un'unica dichiarazione.
- border-width e border-color — gli altri due componenti di un bordo.
- border-radius — arrotonda gli angoli di un bordo stilizzato.
- outline-style — gli stessi stili di linea per i contorni (che si trovano al di fuori del bordo e non influenzano il layout).