CSS border-top-style
La proprietà CSS border-top-style imposta lo stile del bordo superiore (CSS3)
La proprietà border-top-style
consente di definire lo stile del bordo superiore di un elemento. È possibile scegliere tra vari stili come solid
, dashed
, dotted
, double
, o none
per personalizzare l'aspetto del bordo.
Sintassi
Significato dei valori principali:
-
none: non viene applicato alcun bordo.
-
solid: un bordo continuo e solido.
-
dashed: un bordo tratteggiato.
-
dotted: un bordo a punti.
-
double: un bordo doppio con due linee distinte.
-
groove: un bordo che sembra incavato, con un effetto tridimensionale.
-
ridge: un bordo che sembra sporgere, con un effetto tridimensionale.
-
inset: un bordo che sembra incassato.
-
outset: un bordo che sembra sporgere.
Esempio proprietà: border-top-style
Codice Esempio: border-top-style

.border-top-style-example {
width: 300px;
height: 200px;
border-top-style: dashed; /* Bordo superiore tratteggiato */
border-top-width: 5px; /* Larghezza del bordo superiore */
border-top-color: #50a14f; /* Colore verde per il bordo superiore */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-top-style
Esempio di utilizzo di border-top-style
In questo esempio, la proprietà border-top-style
viene utilizzata per definire lo stile del bordo superiore di un elemento:
CSS e HTML per l'elemento con bordo superiore tratteggiato:
<style>
.border-top-style-example {
width: 300px;
height: 200px;
border-top-style: dashed; /* Bordo superiore tratteggiato */
border-top-width: 5px; /* Larghezza del bordo superiore */
border-top-color: #000; /* Colore nero per il bordo superiore */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 0px;
}
</style>
<div class="border-top-style-example">
Elemento con bordo superiore tratteggiato
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.