[CSS] [proprietà] border-style

border-style (proprietà CSS) imposta, con sintassi abbreviata, lo stile del bordo o dei singoli bordi dell’elemento HTML. In particolare:
– nel caso sia indicato un solo valore, esso definisce tutti e quattro i bordi (superiore, destro, inferiore e sinistro) dell’elemento;
– nel caso siano indicati 4 valori, viene definito, nell’ordine, lo stile dei bordi superiore, destro, inferiore e sinistro dell’elemento;
– nel caso siano indicati due valori, il primo valore si riferirà ai bordi superiore e inferiore, mentre il secondo valore si riferirà ai bordi destro e sinistro.

Sintassi

[selettore] {
border-style: dotted (bordo punteggiato) |
         dashed (bordo tratteggiato) |
         solid (bordo continuo) |
         double (doppio bordo) |
         groove (bordo 3D scanalato) |
         ridge (bordo a 3D increspato) |
         inset (bordo a 3D a effetto incavo) |
         outset (bordo a 3D a effetto concavo) |
         none (nessuno) | hidden (nascosto)
}
valore descrizione
XXX XXX

Esempi

<style>
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.misto {border-style: dotted dashed solid double;}
.border_color{border-color:red;}
.border_width{border-width:5px;}
</style>
<p class="dotted border_color border_width">Testo con bordo dotted</p>
<p class="dashed border_color border_width">Testo con bordo dashed</p>
<p class="solid border_color border_width">Testo con bordo solid</p>
<p class="double border_color border_width">Testo con bordo double</p>
<p class="groove border_color border_width">Testo con bordo groove</p>
<p class="ridge border_color border_width">Testo con bordo ridge</p>
<p class="inset border_color border_width">Testo con bordo inset</p>
<p class="outset border_color border_width">Testo con bordo outset</p>
<p class="none border_color border_width">Testo con bordo none</p>
<p class="hidden border_color border_width">Testo con bordo hidden</p>
<p class="misto border_color border_width">Testo con bordo misto</p>

Testo con bordo dotted

Testo con bordo dashed

Testo con bordo solid

Testo con bordo double

Testo con bordo groove

Testo con bordo ridge

Testo con bordo inset

Testo con bordo outset

Testo con bordo none

Testo con bordo misto

Contenuti correlati

  • CSS
  • HTML
  • JavaScript
  • jQuery
  • PHP
  • SQL
  • WORDPRESS

Fonti esterne

css, proprietà css

Related Articles

0 Comment

Rispondi