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-
Essa caixa fica melhor com cantos arredondados, não?

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

Gostou? Compartilhe!

Comentários fechados