CSS3 Bordas(Border)

Usar CSS3pode aplicar imagens às bordas dos elementos.

Usar CSS3Bordas

CSS3Foram fornecidas duas novas propriedades para estilizar de maneira mais elegante os bordas dos elementos- border-image usada para adicionar imagens à borda do border-A propriedade radius, bem como as propriedades usadas para criar cantos arredondados sem usar nenhuma imagem.

A próxima seção vai introduzir o CSS3Essas novas propriedades de borda, para outras propriedades relacionadas às bordas, consulteBordas CSSTutorial.

Criar CSS3Cantos arredondados

border-A propriedade radius pode ser usada para criar cantos arredondados. Esta propriedade geralmente define a forma dos cantos da borda externa. No CSS3Antes disso, as imagens de fatia eram usadas para criar cantos arredondados relativamente complicados.

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

Adicionar CSS3Imagem de borda

border-A propriedade image permite que você especifique uma imagem para usar como borda do elemento.
O design da borda é derivado de border-As laterais e cantos das imagens especificadas na URL da fonte da imagem são criados. As imagens de borda podem ser cortadas, repetidas, ajustadas e esticadas de várias maneiras para se ajustar ao tamanho da área da imagem de borda.

.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;
}