Como criar cantos arredondados com CSS3
O border-radius é a mais antiga implementação de CSS3, e provavelmente por isso a mais comum. Este artigo é sobre como utilizá-la corretamente.
O que é Border-Radius?
Criar cantos arredondados sempre foi uma grande dificuldade para desenvolvedores. Em geral para implementar, tinhamos que alterar o código html inserindo divs inúteis ou na melhor das hipóteses, fazer uma caixa de tamanho fixo e jogar a imagem inteira no background, o que em muitos casos não é uma solução possível.
Para resolver especificamente esse problema foi criado o border-radius.
Como utilizar?
Para usar esta e outras possibilidades do CSS3 nós precisamos adicionar ao código extensões dos seletores específicas para cada navegador. Tenha em mente que isso é um recurso temporário. Quando o CSS3 entrar em vias de finalização isso não será mais necessário. E além disso seu código CSS (com essas extensões) não será mais válido segundo a W3C. Para os mais puristas talvez seja o caso de criar um arquivo extra só com essas modificações.
As extensões mais comuns são:
- Mozilla Firefox: -moz-
- Google Chrome e Safari: -webkit-
- Opera: -o-
- Konqueror: -khtml-
- e o famigerado Internet Explorer: -ms-
Então para gerar o exemplo acima precisamos do seguinte código css:
.teste {
background:#333;
border:1px solid #888;
width:450px;
margin:10px auto;
padding:0px auto;
text-align:center;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
Bugs e afins
Infelizmente até agora apenas Firefox/Safari/Chrome suportam border-radius. Existe um boato de que as últimas versões do Opera (ainda em estágio alpha) já suportam border-radius inclusive sem a necessidade de extensão. Porém o Internet Explorer não tem previsão alguma de aceitar extensões do CSS3. Ainda mais considerando que apenas no ano passado a microsoft lançou um navegador compatível com CSS 2.1. Então, se o canto arredondado for crucial para compreensão do site, você terá que usar o método antigo. Porém ser for apenas um detalhe, essa é uma ótima forma de recompensar quem usa navegadores mais atuais.
De forma geral: Seu site deve aparecer igual em todos os navegadores? A minha opinião é: não.
Um outro problema é que Firefox e navegadores baseados em webkit diferem quanto a especificação de cada canto arredondado.
Para definirmos cada canto no firefox, usamos o seguinte:
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
Já para Chrome e Safari:
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
E para os mais pessimistas, o estágio do border-radius na W3C ainda é de draft(rascunho). Ou seja tudo pode mudar (apesar de ser muito improvável… mesmo) e seu layout ficar quadrado denovo nos próximos navegadores.
Exemplos de site que utilizam border-radius
Quem leu isto também leu:
Marcio é Webdesigner & Front-end Developer (além de ser psicólogo). Ele gosta muito de Web Standards e, entre outras coisas, ainda tenta ser blogueiro nas horas vagas.
Acesse seu site Siga no Twitter
Pingback: Cantos arredondados em todos os browsers - jQuery Corner | Blog do Wallace Silva