CSS border
La proprietà CSS border definisce il bordo di un elemento
La proprietà border
consente di applicare un bordo attorno a un elemento. È una proprietà shorthand che combina tre proprietà: border-width
, border-style
e border-color
. Può essere utilizzata per specificare la larghezza, lo stile e il colore del bordo in un'unica dichiarazione.
Sintassi
Significato dei valori principali:
-
width: definisce la larghezza del bordo (ad esempio,
2px
,medium
, ecc.). -
style: definisce il tipo di linea del bordo, come
solid
,dashed
,dotted
, ecc. -
color: definisce il colore del bordo (può essere una parola chiave, un codice esadecimale, RGB, ecc.).
Esempio proprietà: border
Codice Esempio: border

.border-example {
border: 2px solid #50a14f;
padding: 20px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border
Esempio di utilizzo di border
In questo esempio, la proprietà border
è utilizzata per applicare un bordo a un elemento:
CSS e HTML per l'elemento con bordo:
<style>
.border-example {
width: 300px;
height: 150px;
border: 15px solid #50a14f; /* Bordo di 15px, solido e verde */
padding: 20px;
background-color: #333; /* Sfondo scuro per evidenziare il bordo */
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-example">
Bordo applicato
</div>
Leggenda Proprietà:

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.