CSS - Bordi
Le proprietà del bordo consentono di specificare come dovrebbe apparire il bordo del riquadro che rappresenta un elemento. Ci sono tre proprietà di un bordo che puoi modificare:
Il border-color specifica il colore di un bordo.
Il border-style specifica se un bordo deve essere pieno, linea tratteggiata, doppia linea o uno degli altri valori possibili.
Il border-width specifica la larghezza di un bordo.
Vedremo ora come utilizzare queste proprietà con esempi.
La proprietà border-color
La proprietà border-color consente di modificare il colore del bordo che circonda un elemento. Puoi modificare individualmente il colore dei lati inferiore, sinistro, superiore e destro del bordo di un elemento utilizzando le proprietà -
border-bottom-color cambia il colore del bordo inferiore.
border-top-color cambia il colore del bordo superiore.
border-left-color cambia il colore del bordo sinistro.
border-right-color cambia il colore del bordo destro.
L'esempio seguente mostra l'effetto di tutte queste proprietà:
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà in stile bordo
La proprietà border-style consente di selezionare uno dei seguenti stili di bordo:
none- Nessun confine. (Equivalente alla larghezza del bordo: 0;)
solid - Il bordo è una singola linea continua.
dotted - Il bordo è una serie di punti.
dashed - Border è una serie di linee brevi.
double - Il bordo è costituito da due linee continue.
groove - Il bordo appare come se fosse scolpito nella pagina.
ridge - Il bordo sembra l'opposto del solco.
inset - Bordo fa sembrare la casella incorporata nella pagina.
outset - Bordo fa sembrare che la scatola stia uscendo dalla tela.
hidden - Uguale a nessuno, tranne in termini di risoluzione dei conflitti di confine per gli elementi della tabella.
È possibile modificare individualmente lo stile dei bordi inferiore, sinistro, superiore e destro di un elemento utilizzando le seguenti proprietà:
border-bottom-style cambia lo stile del bordo inferiore.
border-top-style cambia lo stile del bordo superiore.
border-left-style cambia lo stile del bordo sinistro.
border-right-style cambia lo stile del bordo destro.
L'esempio seguente mostra tutti questi stili di bordo:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà border-width
La proprietà border-width consente di impostare la larghezza dei bordi di un elemento. Il valore di questa proprietà potrebbe essere una lunghezza in px, pt o cm oppure dovrebbe essere impostato su thin, medium o thick.
È possibile modificare individualmente la larghezza dei bordi inferiore, superiore, sinistro e destro di un elemento utilizzando le seguenti proprietà:
border-bottom-width cambia la larghezza del bordo inferiore.
border-top-width cambia la larghezza del bordo superiore.
border-left-width cambia la larghezza del bordo sinistro.
border-right-width cambia la larghezza del bordo destro.
L'esempio seguente mostra tutte queste larghezze del bordo:
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Produrrà il seguente risultato:
Proprietà del bordo utilizzando la stenografia
La proprietà border ti consente di specificare il colore, lo stile e la larghezza delle linee in una proprietà:
L'esempio seguente mostra come utilizzare tutte e tre le proprietà in una singola proprietà. Questa è la proprietà utilizzata più di frequente per impostare il bordo attorno a qualsiasi elemento.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Produrrà il seguente risultato: