Cantos arredondados para qualquer navegador
Recentemente vimos aqui mesmo no Design Blog, um artigo que ensina Como criar cantos arredondados com CSS3. Mas como todos sabem o CSS3 ainda não foi implementado em todos navegadores. Este artigo fala uma maneira prática de criar cantos arredondados de forma que funcione em qualquer navegador.
Criar cantos arredondados em divs, sempre foi um grande desafio para muitos web designers, até o surgimento do atributo border-radius no CSS3. Mas esse atributo por enquanto, infelizmente, é suportado somente por três navegadores.
Mas isso não é motivo para deixarmos de usar cantos arredondados, pois existe uma maneira muito prática e rápida de fazer com que sua div fique com cantos arredondados em qualquer navegador. Então vamos ao que interessa:
A primeira coisa que devemos decidir é o tamanho do raio do canto. Após decidido o raio, devemos abrir algum editor de imagens e criar um círculo com o dobro do raio definido. Por exemplo: se o raio do canto for de 5px, o círculo deverá ter 10px de diâmetro.
Então, depois de criado o círculo, devemos cortá-lo em quatro partes, como na imagem abaixo, salve as imagens, com os mesmos nomes que coloquei abaixo, pois fica mais fácil de identificar a imagem certa para cada canto, além de poder servir como um padrão na hora de criar bordas para outras divs.
Uma observação muito importante a ser feita aqui, é que as imagens não podem ter fundo transparente, pois poderá haver alguns problemas na junção com a parte reta da borda.
Corte a ser feito na imagem
Agora, que já temos as imagens necessárias, vamos criar a parte de CSS da div.
Inicialmente, vamos criar uma div principal, onde vai o conteúdo da caixa, e três classes: uma para definir padrões dos cantos, uma para definir retas horizontais e outra para retas verticais.
#divPrincipal {
position:relative;
margin:10px;
width:400px;
height:auto;
padding:5px;
overflow:hidden;
}
#divPrincipal .cantos {
width:5px;
height:5px;
z-index:10;
position:absolute;
}
#divPrincipal .retaH {
width:100%;
height:1px;
background-color:#666;
position:absolute;
z-index:1;
}
#divPrincipal .retaV {
width:1px;
height:100%;
background-color:#666;
position:absolute;
z-index:1;
}
No padding da #divPrincipal, devemos colocar o valor do raio do canto, na classe cantos, também devemos colocar no width e heigth o valor do raio do canto, além de declaram no z-index um valor maior do que o valor do z-index das classes de borda reta, para que as imagens dos cantos sobreponham as linhas retas.
Agora vamos declarar, cada uma div individual, para cada canto da div:
#divPrincipal #blt {
top:0px;
left:0px;
background-image:url(bLeftTop.png);
}
#divPrincipal #blb {
bottom:0px;
left:0px;
background-image:url(bLeftBottom.png);
}
#divPrincipal #brt {
right:0px;
top:0px;
background-image:url(bRigthTop.png);
}
#divPrincipal #brb {
right:0px;
bottom:0px;
background-image:url(bRigthBottom.png);
}
Repare que coloquei como id de cada uma das divs, uma sigla que identifique qual canto ela representa por exemplo: “Border Left Top” virou “blt”. Assim fica mais fácil de saber quais atributos devo colocar, por exemplo: se a div é do canto direito e no topo, coloco o valor 0px nos atributos right e top. Já se ela é no canto esquerdo, na parte de baixo da #divPrincipal, coloco 0px no left e bottom. Além de colocar como background, a imagem correspondente àquele canto.
Agora vamos declarar em nosso CSS, as bordas retas:
#divPrincipal #bTop {
top:0px;
}
#divPrincipal #bBottom {
bottom:0px;
}
#divPrincipal #bLeft {
left:0px;
}
#divPrincipal #bRigth {
right:0px;
Nas bordas retas, a situação fica ainda mais clara, só precisamos definir valor 0px para a direção que tal borda estará.
Agora, vamos partir para o HTML. Em sua página você deve colocar a #divPrincipal, e aninhada à ela, cada div de canto, e de borda reta. Após ter colocado cada div, vem o conteúdo da div em si. Como no exemplo abaixo.
<div id="divPrincipal">
<div id="blt" class="cantos"></div>
<div id="blb" class="cantos"></div>
<div id="brt" class="cantos"></div>
<div id="brb" class="cantos"></div>
<div id="bTop" class="retaH"></div>
<div id="bBottom" class="retaH"></div>
<div id="bLeft" class="retaV"></div>
<div id="bRigth" class="retaV"></div>
<p>Nesta caixa temos bordas arredondas que funcionam em qualquer navegador. </p>
<p>Ela foi testada no Internet Explorer 8, Firefox 3.5, Chrome e Opera 10.</p>
</div>
À partir desse exemplo, chegaremos a um resultado muito próximo ao da seguinte caixa:
Pode-se usar também efeitos como sombras, brilhos, relevo, etc. na borda, é só adaptar o tamanho das divs dos cantos, altura da div de linha horizontal, largura da div de linha vertical, e o padding da divPrincipal, de acordo com suas necessidades.
Artigos relacionados
Criador e editor-chefe do Design Blog, trabalha como designer e programador no xCake. Nerd desde pequeno, ama tudo relacionado a internet. Seu maior sonho é entrar em algum quarto e dizer "Senhores, não se preocupem: sou da Internet".
Acesse seu site Siga no Twitter