Colocar bordas arredondadas em um layout, é sempre muito bonito e deixa o seu layout com cara de profissional. Ao invés de você ficar perdendo tempo em criar imagens no PhotoShop, medir cautelosamente todos os pixels e depois, se for o caso ainda colorir a imagem, você pode usar um código pouco conhecido na web, mas muito útil e funcional.
Para arredondar bordas sem a utilização de imagens, usando apenas códigos simples em CSS, basta colar o código abaixo dentro do código relacionado à coluna (ou mesmo imagem separada) que você quer arredondar as bordas (Exemplo: #header {width: 910px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } )
Para que funcione corretamente nos navegadores Firefox, Google Chrome e Safari, utilize os dois atributos abaixo (Como sempre, os códigos mais sofisticados e úteis não funcionam no Internet Explorer):
border: 1px solid #000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Depois de ter feito isso, basta visualizar e desfrutar deste novo recurso que você acabou de aprender (ou não).
Obs: o código em vermelho pode ser alterado pela hexadecimal da cor que você quiser.
Nota: a imagem do post é um exemplo claro do tutorial.
Samuel, sinta-se beijado e abraçado,
a muito tempo procurava um código assim,
e esse superou minhas expectativas pela
simplicidade, muito obrigado!
Olá Leninha;
Obrigado pelo carinho e pela sua visita aqui no blog. Fico feliz por ter sido útil. Pena que o código não funciona para o IE =/
Abraços!
Da pena sim, mas em quem ainda usa o IEca,
não é mesmo???
Leninha;
Realmente. Eu também não gosto muito do IE. O IE8 deu uma boa melhorada em sua performance, navegação e estabilidade. Porém, se for comparado com os demais navegadores, ele ainda continua muito lento e com falta de recursos importantes, como o das bordas arrendondadas pelo CSS.
Abraços!