Cantos arredondados. Eles já eram uma “grande coisa” alguns anos atrás e, embora existam várias soluções hoje, eles continuam sendo um
obstáculo que não pode ser superado com muita elegância. Quando o CSS3 foi
apresentado, uma das primeiras características mostradas foi a
propriedade border-radius, nos inibindo de aplicar cantos
arredondados com o CSS. Lembra como todos estavam felizes? Pare de pensar assim
e leia este artigo para ver como é que a idéia já está falhando antes mesmo de
encontrar a maneira para cada navegador moderno.

Como as coisas serão

Há um tempo atrás, técnicas de design eram necessárias para
obter bordas arredondadas em um conteiner transparente. Desde que nós decidimos
não usar o JavaScript, começamos a procurar outras opções, finalmente estabelecendo a resolução de algumas boas e velhas críticas. A ultima versão do Firefox e
WebKit (Safari e Chrome) tem suas próprias propriedades para renderizar
bordas arredondadas usando CSS. Seu uso é extremamente simples e seus
resultados claramente bonitos.

div {border-radius:10px;}

O código acima demonstra o fácil uso que é definido pelos
membros da W3C (World Wide Web Consortium). Esta declaração cria bordas
arredondadas, criadas em um círculo com raio de 10px. Além desse, é possível
configurar valores separados ambos para os raios horizontais e verticais e cada
borda separadamente. Considerando o espaço deste artigo embora, a declaração
acima nós realmente precisamos.

Uma pequena situação de teste

Há uma semana ou mais, eu estava tentando projetar no HTML e
desde que eu precisei de bordas arredondadas eu notei que eu poderia usar a
propriedade de Firefox (antes de tudo, isso era somente um exercício de
design). O que eu precisei foi de uma barra de navegação com 4 bordas
arredondadas. Um caso pouco simples, então eu adicionei bordas arredondadas no
ul, oscilando os elementos li e acrescentando alguns retoques finais para os
estados active e hover. Foi onde
começou a falhar.

Firefox e WebKit tem seus próprios border-radius
implementados agora, então nós iremos usar aqueles para construir e demonstrar
nosso teste. A pagina teste contém uma configuração simples de navegação
horizontal (sem algum projeto ideal), então dê uma rápida olhada para obter um
entendimento melhor da situação (e problema).

Página de teste
>> barra de navegação com bordas arredondadas.

(trabalha somente em versões que suportam a funcionalidade,
como Safari,  Firefox e Chrome)

O que correu mal

O problema são as expectativas. Em nossa cabeça, bordas
arredondadas (e bordas) são muito mais do que um elemento de desenho. Se você
colocar bordas em um conteiner e você arredonda eles, o conteiner se torna tudo
que está dentro da área entre as bordas. A parte fora do arredondamento não é
uma parte do conteiner. Os especialistas do W3C parecem levar em conta como
cor do background e imagens no conteiner são tampadas igualmente.

O que está faltando são regras que indicam o comportamento
dos elementos dentro do conteiner. No exemplo acima, significa a lista e os
elementos dos links. Embora o ul (conteiner) receba bordas arredondadas, a
ligação de elementos parece desconhecer isso, então quando eles têm um
background eles sobrepõem as bordas arredondadas. Eu não acho que alguém ia
considerar isto lógico, ou mesmo preferiu este comportamento. Se você voltar na
Página de
teste e você coloca o mouse sobre o primeiro elemento que você verá como é
que este não é exatamente o que você esperaria que fosse.

Conserte isso

Existem, evidentemente, várias soluções, mas nenhuma delas é boa. Você poderia colocar as bordas nos links dos elementos, mas então
você tem que se preocupar com as bordas duplas e recebendo os arredondamentos
do lado direito da barra. Outra opção é permitir que a borda principal na ul e
puxar o primeiro elemento acima da borda usando margens negativas, depois
aplicar o mesmo arredondamento para o elemento li.

Existem provavelmente outras soluções, mas tem uma razão por
eu não estar explicando-as totalmente ou mesmo me incomodar a obtê-las através
de qualquer forma clara. Uma implementação como essa é simplesmente impossível.
E eu não posso imaginar que vamos ter de lidar com coisas simples como essa.
Se essa é a forma como a execução será em 5 anos, propriamente, já é um
fracasso para mim.

*

Publicado originalmente em http://www.onderhond.com/blog/work/trouble-with-rounded-corners