Bordo CSS

Attributi di bordo CSS

CSS border L'attributo consente di specificare lo stile, la larghezza e il colore del bordo dell'elemento.

Tutti i miei bordi hanno bordi.

Ho un bordo inferiore rosso.

Ho un bordo arrotondato.

Ho un bordo sinistro blu.

Stili di bordo CSS

border-style L'attributo specifica il tipo di bordo da visualizzare.

Permette i seguenti valori:

  • dotted - Definire il bordo a linea punteggiata
  • dashed - Definire il bordo a linea tratteggiata
  • solid - Definire il bordo a linea solida
  • double - Definire il bordo a doppio spessore
  • groove - Definire il bordo 3D scanalato. L'effetto dipende dal valore di border-color
  • ridge - Definire il bordo 3D cresta. L'effetto dipende dal valore di border-color
  • inset - Definire il bordo 3D inset. L'effetto dipende dal valore di border-color
  • outset - Definire il bordo 3D outset. L'effetto dipende dal valore di border-color
  • none - Definire il bordo senza bordo
  • hidden - Definire il bordo nascosto

border-style L'attributo può impostare un numero da uno a quattro valori (usati per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).

Esempio

Esempio di stili di bordo diversi:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Risultato:

Bordi a punti.

Bordi a tratteggio.

Bordi continui.

Bordi a doppia linea.

Bordi incavati. L'effetto dipende dal valore di border-color.

Bordi a grana. L'effetto dipende dal valore di border-color.

Bordi 3D inset. L'effetto dipende dal valore di border-color.

Bordi 3D outset. L'effetto dipende dal valore di border-color.

Bordi senza bordi.

Bordi nascosti.

Bordi misti.

Prova personalmente

Attenzione:A meno che non sia impostato border-style Se non viene impostata l'attributo, nessun'altra proprietà di bordo CSS (che verrà spiegata in dettaglio nel capitolo successivo) avrà alcun effetto!