8.1 Proprietà border
I bordi sono un aspetto importante del web design. Permettono di evidenziare gli elementi e migliorare la percezione visiva della pagina. CSS offre molte proprietà per creare e stilizzare i bordi. Esaminiamo le proprietà principali dei bordi, includendo la sintassi compatta e completa, nonché le proprietà per impostare larghezza, stile, colore e angoli arrotondati.
Parametri principali
I parametri principali del bordo possono essere impostati utilizzando proprietà separate: border-width, border-style e border-color.
Sintassi:
element {
border-width: width;
border-style: style;
border-color: color;
}
Esempio di utilizzo:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Sintassi compatta
La proprietà border permette di impostare tutti i parametri principali del bordo (larghezza, stile e colore) in un'unica riga.
Sintassi:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Sintassi compatta</div>
<div class="border-full">Sintassi completa</div>
</body>
8.2 Larghezza del bordo: border-width
La proprietà border-width imposta la larghezza del bordo. I valori possono essere impostati in pixel (px), punti (pt), percentuali (%) o parole chiave (thin, medium, thick).
Sintassi:
element {
border-width: width;
}
Esempio:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Bordo sottile</div>
<div class="border-medium">Bordo medio</div>
<div class="border-thick">Bordo spesso</div>
<div class="border-custom">Bordo di 5px</div>
</body>
8.3 Stile del bordo: border-style
Descrizione:
La proprietà border-style imposta lo stile del bordo. Le opzioni di stile includono:
none: nessun bordosolid: linea continuadotted: linea puntinatadashed: linea tratteggiatadouble: linea doppiagroove: bordo con scanalaturaridge: bordo con rilievoinset: bordo incassatooutset: bordo in rilievo
Sintassi:
element {
border-style: style;
}
Esempio:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Nessun bordo</div>
<div class="border-solid">Linea continua</div>
<div class="border-dotted">Linea puntinata</div>
<div class="border-dashed">Linea tratteggiata</div>
<div class="border-double">Linea doppia</div>
<div class="border-groove">Scanalatura</div>
<div class="border-ridge">Rilievo</div>
<div class="border-inset">Bordo incassato</div>
<div class="border-outset">Bordo in rilievo</div>
</body>
8.4 Colore del bordo: border-color
La proprietà border-color imposta il colore del bordo. Il colore può essere specificato in vari formati: nomi dei colori, codici esadecimali, RGB, RGBA, HSL, HSLA.
Sintassi:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Bordo rosso</div>
<div class="border-blue">Bordo blu</div>
<div class="border-green">Bordo verde</div>
<div class="border-rgba">Bordo rosso semitrasparente</div>
</body>
8.5 Angoli arrotondati con border-radius
La proprietà border-radius permette di arrotondare gli angoli degli elementi, creando bordi arrotondati. Può essere applicata a tutti e quattro gli angoli contemporaneamente o a ciascun angolo singolarmente.
Sintassi:
element {
border-radius: radius;
}
Valori:
- Valore singolo: ad esempio,
border-radius: 10px;— imposta lo stesso raggio di arrotondamento per tutti gli angoli - Due valori: ad esempio,
border-radius: 10px 20px;— il primo valore per gli angoli in alto a sinistra e in basso a destra, il secondo per gli angoli in alto a destra e in basso a sinistra - Quattro valori: ad esempio,
border-radius: 10px 20px 30px 40px;— imposta i raggi per gli angoli in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra rispettivamente - Valori misti: i raggi possono essere impostati in percentuale, consentendo di adattare l'arrotondamento alle dimensioni dell'elemento
Esempio:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Arrotondamento di tutti gli angoli</div>
<div class="radius-top">Arrotondamento degli angoli superiori</div>
<div class="radius-bottom">Arrotondamento degli angoli inferiori</div>
<div class="radius-mixed">Arrotondamento misto degli angoli</div>
</body>
.radius-all: applica lo stesso raggio di arrotondamento (15px) a tutti gli angoli.radius-top: applica l'arrotondamento (20px) solo agli angoli superiori.radius-bottom: applica l'arrotondamento (25px) solo agli angoli inferiori.radius-mixed: applica valori diversi di raggio a ciascun angolo
GO TO FULL VERSION