Bordas arredondadas com CSS3


Uma das novidades trazidas pelo CSS3 é que as bordas dos elementos HTML podem ser arredondadas.

Veja um exemplo com as #DIVs abaixo:
Lorem Ipsum
Lorem Ipsum
O código para bordas arredondadas como na caixa acima é bastante simples:
-Moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;

border: 1px solid #000;
border: 1px solid # 000;
padding: 10px;
A classe border-radius (destacada em vermelho) deve ser repetida dessas três formas para que possa funcionar em diversos navegadores. Mesmo assim, alguns navegadores mais antigos podem não aceitar a transformação.
Veja outros exemplos do que pode ser feito:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Ainda existem outras formas de estilizar as bordas, vejam o código:
-Moz-border-radius: cima direita baixo esquerda;
-webkit-border-radius: cima direita baixo esquerda;
border-radius: cima direita baixo esquerda;
Modificando as partes em negrito (cima, direita, baixo, esquerda) por algum número inteiro você modifica a borda de cada lado do elemento.
Lembre-se de que os números devem ser iguais nas três linhas a menos que você queira que para cada navegador seja exibido uma borda diferente.
Vejamos agora um exemplo de como colocar o código na parte de estilos do seu blog. O código deve ser colocado entre as chaves e nesse caso, será usado como exemplo o código de estilo da #SIDEBAR:
#sidebar {
width: 200px;
padding: 5px;
border: 2px solid #99CC00;
-Moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;

}
Ficou alguma dúvida? Não conseguiu? Precisa de ajuda? É só deixar um comentário.
Enjoy!

Postagens mais visitadas deste blog

Resumir Postagens