La proprietà border viene usata come regola nel CSS per disegnare e modificare i bordi di un elemento. Si applica per molti tipi di selettori, come sottotitoli, paragrafi e blocchi ma anche per creare bordi di singole parole che si trovano all’interno di un altro elemento utilizzando il tag span.
Per inserire un bordo ad un elemento basta scrivere la relativa proprietà con l’attributo per rendere il bordo visibile e con un certo spessore. Ad esempio, dopo avere creato un blocco div, scriveremo la seguente regola nel foglio di stile:
div {
border: solid;
}
Possiamo anche scrivere la regola all’interno del tag nel codice HTML
<div style = "border: solid">...</div>
In entrambi i casi il riquadro sarà come questo ma possiamo aggiungere altri attributi per aumentare o diminuire il suo spessore, per dargli un colore oppure per dare una forma meno spigolosa ai suoi vertici.
Le proprietà border e border-radius
Per inserire un bordo con gli angoli arrotondati con le regole CSS, non si usa soltanto la proprietà border ma si aggiunge anche la proprietà border-radius.
Pertanto il tag border serve per inserire un bordo e stabilire tipo, spessore e colore mentre per arrotondare i vertici del bordo si usa il tag border-radius inserendo la misura in pixel del raggio.
div {
border: solid blue 10px;
border-radius: 10px
}
Nell’attributo del border-radius si possono scrivere fino a 4 valori:
- Se si inserisce un solo valore, come sopra, questo si applica a tutti e quattro gli angoli;
- Se i valori sono due, il primo vale per gli angoli che si trovano in alto a sinistra e in basso a destra mentre il secondo si applica sugli angoli in alto a destra e in basso a sinistra;
- Se i valori sono tre, il primo e il terzo valore valgono rispettivamente per gli angoli che si trovano in alto a sinistra e in basso a destra mentre il secondo per gli angoli in alto a destra e in basso a sinistra;
- Se vengono inseriti quattro valori, ciascuno rappresenta un angolo partendo da quello in alto a sinistra e proseguendo in senso orario.
Si può anche inserire il bordo soltanto su uno dei lati inserendo i seguenti tag al posto di quello generico:
- border-left per i bordi a sinistra;
- border-top per il bordo di sopra;
- border-right per il bordo a destra;
- border-bottom per il bordo che si trova sotto..
