Proprietà CSS border-style

定义和用法

border-style属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是none时边框才可能出现。

例子1

border-style:dotted solid double dashed;
  • 上边框是点状
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

例子2

border-style:dotted solid double;
  • 上边框是点状
  • 右边框和左边框是实线
  • 下边框是双线

例子3

border-style:dotted solid;
  • 上边框和下边框是点状
  • 右边框和左边框是实线

例子4

border-style:dotted;
  • 所有4个边框都是点状

另请参阅：

CSS教程：Bordo CSS

Manuale di riferimento HTML DOM:Proprietà borderStyle

Esempio

Impostare lo stile dei 4 bordi:

p
  {
  border-style:solid;
  }

Prova tu stesso

Sintassi CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valore dell'attributo

Valore Descrizione
none Definisce un bordo senza margine.
hidden È lo stesso di "none". Tuttavia, non si applica alle tabelle; per le tabelle, "hidden" viene utilizzato per risolvere conflitti di bordi.
dotted Definisce un bordo a punto. In molti browser viene rappresentato come una linea continua.
dashed Definisce una linea tratteggiata. In molti browser viene rappresentata come una linea continua.
solid Definisce una linea continua.
double Definisce una linea a doppio tratto. La larghezza delle linee è uguale al valore di border-width.
groove Definisce un bordo incavo 3D. L'effetto dipende dal valore di border-color.
ridge Definisce un bordo ribbordato 3D. L'effetto dipende dal valore di border-color.
inset Definisce un bordo inset 3D. L'effetto dipende dal valore di border-color.
outset Definisce un bordo outset 3D. L'effetto dipende dal valore di border-color.
inherit Definisce che lo stile del bordo dovrebbe essere ereditato dal genitore.

Descrizione

Lo stile di bordo più imprevedibile è double. Definito come due linee di spessore più lo spazio tra di esse che equivale al valore di border-width. Tuttavia, la specifica CSS non dice se una linea è più spessa dell'altra o se entrambe dovrebbero avere lo stesso spessore, né indica se lo spazio tra le linee dovrebbe essere più spesso delle linee stesse. Tutto questo è deciso dall'agente utente, e il creatore non ha alcun impatto su questa decisione.

Dettagli tecnici

Valore predefinito: non specificato
Ereditarietà: no
Versione: CSS1
Sintassi JavaScript: oggetto.style.borderStyle="dotted double"

Più esempi

Impostare lo stile dei bordi per tutti e quattro i lati
Questo esempio dimostra come impostare lo stile dei bordi per tutti e quattro i lati.
Impostare diversi bordi per ogni lato
Questo esempio dimostra come impostare bordi diversi su tutti i lati dell'elemento.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5