
A borda arredondada em elementos sempre foi um grande problema, em vários casos só se conseguia o resultado esperando utilizando uma imagem de fundo e que geravam outros problemas como, por exemplo, a dificuldade em manipular o elemento (devido a ter um tamanho pré-fixado) em várias resoluções.
Com a propriedade border-radius é possível arredondar os cantos de um elemento, porém por ser um recurso do CSS3 (que está atualmente em desenvolvimento) pode acontecer dos navegadores mais antigos não reconhecerem e fazer a leitura correta desse recurso.
Dessa forma é importante criar ajustes para que mesmo sem os cantos arredondados, o elemento apresente de forma coerente com o layout do projeto.
Bom, então vamos lá:
A sintaxe do css para bordas arredondadas é bem simples:
border-radius: 5px;
Com isso o elemento ficará com 5px de arredondamento em todos os cantos do elemento, acompanhe um exemplo com HTML, CSS e imagem:
HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Elementos com cantos arredondados</title> </head> <body> <div id="borda"> <p>Elemento com bordas arredondadas</p> </div><!-- #borda --> </body> </html>
CSS:
<style type="text/css"> #borda { width: 350px; display: 100px; display: block; border: solid 1px #069; border-radius: 10px; text-align: center; } </style>
De como fica nos novos navegadores (imagem):
Nesse exemplo acima é possível mostrar um leve arredondamento dos quatro cantos.
Também é possível colocar diferentes valores para cada um dos cantos, acompanhe no exemplo abaixo:
border-top-left-radius: 10px; // 10px de arredondamento no canto superior esquerdo do elemento. border-bottom-left-radius: 5px; // 5px de arredondamento no canto inferior esquerdo do elemento. border-top-right-radius: 3px; // 3px de arredondamento no canto superior direito do elemento. border-bottom-right-radius: 6px // 6px de arredondamento no canto inferior direito do elemento.
Compatibilidade com navegadores:
Como especificado anteriormente, alguns navegadores (ou algumas versões deles) não funcionam corretamente e pode ser necessário aplicar alguns hacks, acompanhe abaixo alguns hacks de compatibilidade:
Para algumas versões (mais antigas) do mozilla Firefox:
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Para algumas versões do Opera/Safari:
-webkit-border-radius
-webkit-border-radius-topleft
-webkit-border-radius-topright
-webkit-border-radius-bottomright
-webkit-border-radius-bottomleft
É isso pessoal, até a próxima.
Para saber como está o desenvolvimento do CSS3, você pode visitar esse link: http://www.w3.org/standards/techs/css#w3c_all
Deixe uma resposta