Bordi

Con il css3 possiamo personalizzare i bordi.

La proprietà border-radius possiamo creare dei bordi con angoli arrotondati

• border-top-left-radius – angolo superiore sinistra;
• border-top-right-radius – angolo superiore destro;
• border-bottom-right-radius – angolo inferiore destro;
• border-bottom-left-radius – angolo inferiore sinistro;

Possiamo inserire solo un parametro se il il raggio orizzontale e verticale sono uguali.

Possiamo creare un bordo personalizzato con la proprietà border-image, l’uso non è proprio intuitivo quindi facciamo riferimento a questa immagine

L’elemento A viene usato per i bordi, mentre B per i lati. I valori da inserire sono:

• border-image-source, url dell’immagine;
• border-image-slice, come tagliare l’immagine;
• border-image-width, larghezza dell’immagine;
• border-image-outset, quanto oltre il bordo della casella l’immagine deve estendersi;
• border-image-repeat, pecifica se l’immagine deve essere ripetuta, arrotondata o allungata;

Un’altra proprietà ci permette di applicare un’ombra ad un box, box-shadow ha i seguenti parametri:

• h-shadow – posizione orizzontale;
• v-shadow – posizione verticale;

Valori positivi indicano lo spostamento dell’ombra verso il basso e verso destra mentre valori negativi indicano uno spostamento verso l’alto e verso sinistra.

Altri parametri opzionali sono:

• blur – distanza dal bordo del box;
• spread – dimensioni dell’ombra;
• color – colore dell’ombra;
• inset – indica se l’ìombra è interna (inset) o esterna (outset);