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 hidden
Testo con bordo misto
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment