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