CSSCursos WebHTMLTutoriais

Bordas CSS3

Com bordas CSS3 você pode dar muitos efeitos a navegadores, como fazer bordas arredondadas, adicionar sombras a bordas e até usar imagens como borda.

  • border-radius (raio de borda)
  • border-image (imagem como borda)
  • box-shadow (Sombra da caixa)


border-radius

É usado para arredondar os cantos das bordas.

Exemplo

div{border-radius:10px;}

Ou você pode definir todas as bordas de uma vez só:

div{border-radius: 25px 25px 25px 25px;}

Respectivamente: Superior esquerdo, Superior direito, Inferior esquerdo, Inferior direito.

Resultado



border-image
border-image é usado para definir a imagem como bordas.

Exemplo

div1{
width:100px;
height:100px;
border-width:10px;
border-image:url(border.png) 30 30 repeat;
-moz-border-image:url(border.png) 30 30 repeat; /* Firefox */
-webkit-border-image:url(border.png) 30 30 repeat; /* Safari e Chrome */
-o-border-image:url(border.png) 30 30 repeat; /* Opera */
}


Stretch – “estica” a imagem, preenchendo todo o elemento de uma única vez;

Repeat – repete a imagem até preencher toda a borda;

box-shadow

box-shadow é usado para dar sombra às bordas.

Exemplo

div{box-shadow: 10px 10px 10px 5px black;}

Wendell Rodrigues

Administrador e editor do site TecForest , estudante de sistemas de informação pela Estácio de Sá, apaixonado por tecnologia e inovação.

Artigos relacionados

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Verifique também
Fechar
Botão Voltar ao topo
Fechar
Fechar