Proprietà borderStyle dello stile

Definizione e uso

borderStyle Imposta o restituisce lo stile della bordatura dell'elemento.

Questa proprietà può accettare da uno a quattro valori:

  • Un valore, ad esempio: p {border-style: solid} - Tutte e quattro le bordature sono continue
  • Due valori, ad esempio: p {border-style: solid dotted} - Le bordature superiori e inferiori sono continue, le laterali sono tratteggiate
  • Tre valori, ad esempio: p {border-style: solid dotted double} - La bordatura superiore è continua, le laterali sono tratteggiate, la inferiore è a doppio tratteggiato
  • Quattro valori, ad esempio: p {border-style: solid dotted double dashed} - La bordatura superiore è continua, la destra è tratteggiata, la inferiore è a doppio tratteggiato, la sinistra è tratteggiata

Vedi anche:

Tutorial CSS:Bordi CSS

Manuale di riferimento CSS:Proprietà border-style

Manuale di riferimento DOM HTML:Proprietà border

Esempio

Esempio 1

Aggiungi un bordo solido all'elemento <div>:

document.getElementById("myDiv").style.borderStyle = "solid";

Prova da solo

Esempio 2

Modifica lo stile dei quattro bordi dell'elemento <div>:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Prova da solo

Esempio 3

Restituisce lo stile del bordo dell'elemento <div>:

alert(document.getElementById("myDiv").style.borderStyle);

Prova da solo

Esempio 4

Dimostrazione di tutti i diversi valori:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Prova da solo

Sintassi

Restituisce l'attributo borderStyle:

object.style.borderStyle

Imposta l'attributo borderStyle:

object.style.borderStyle = value
Valore Descrizione
none Definisce il bordo inesistente. Predefinito.
hidden Uguale a "none", ma non nel caso di conflitto di bordi degli elementi tabella.
dotted Definisce il bordo punteggiato.
dashed Definisce il bordo tratteggiato.
solid Definisce il bordo solido.
double Definisce due bordi. La larghezza dei due bordi è uguale al valore di border-width.
groove Definisce il bordo 3D scanalato. L'effetto dipende da border-color valore.
ridge Definisce il bordo 3D ripido. L'effetto dipende da border-color valore.
inset Definisce il bordo 3D inset. L'effetto dipende da border-color valore.
outset Definisce il bordo 3D outset. L'effetto dipende dal valore di border-color.
initial Imposta questo attributo al suo valore predefinito. Vedi anche initial.
inherit Eredita questo attributo dal suo elemento padre. Vedi anche inherit.

Dettagli tecnici

Valore predefinito: Nessuno
Valore di ritorno: Stringa che rappresenta lo stile del bordo dell'elemento.
Versione CSS: CSS1

Il browser supporta

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto