Border di CSS3

Con CSS3, è possibile applicare immagini ai bordi degli elementi.

Utilizzo dei bordi CSS3

CSS3 offre due nuove proprietà per configurare in modo più elegante lo stile dei bordi degli elementi - border-image per aggiungere immagini al border-radius e proprietà per creare angoli arrotondati senza utilizzare immagini.

La prossima sezione ti presenterà questi nuovi attributi di bordo di CSS3, per altre proprietà correlate ai bordi, consultaBordi CSSTutorial.

Crea angoli arrotondati CSS3

L'attributo border-radius può essere utilizzato per creare angoli arrotondati. Questo attributo definisce di solito la forma degli angoli del margine esterno. Prima di CSS3, le immagini tagliate venivano utilizzate per creare angoli arrotondati piuttosto complicati.

.box {
　　　　width: 300px;
　　　　height: 150px;
　　　　background: #ffb6c1;
　　　　border: 2px solid #f08080;
　　　　border-radius: 20px;
}

Aggiungi immagine di bordo CSS3

L'attributo border-image ti permette di specificare un'immagine da utilizzare come bordo dell'elemento.
Il design del bordo è creato dai lati e dagli angoli dell'immagine specificata nel URL di origine di border-image. I segmenti di immagine possono essere tagliati, ripetuti, scalati e allungati in vari modi per adattarsi alla dimensione dell'area dell'immagine di bordo.

.box {
　　　　width: 300px;
　　　　height: 150px;
　　　　border: 15px solid transparent;
　　　　-webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
　　　　-o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
　　　　border-image: url("border.png") 30 30 round;
}