Bordas com cantos arredondados com JQuery http://www.marcelosantana.com/jquery/bordas-com-cantos-arredondad...

Bordas com cantos arredondados utilizando JQuery

Autor: Marcelo | Postado em: 05/06/2009 | Categoria: JQuery

Você desenhou um layout legal para o seu site cheio de cantos arredondados, e tem pavor de codificar ele pois nem sabe por onde começar?

Existem algumas soluções:

CSS 3: Muito cuidado com essa solução, pois não são todos os navegadores que interpretam o CSS3. Quando ele se tornar padrão será, com
certeza, a melhor solução. Por enquanto, fuja dela.
Background images: É uma das formas mais simples, já que montamos uma imagem com um tamanho fixo e aplicamos como background. Mas
essa solução não é boa, pois se precisarmos aumentar ou diminuir o box, teremos que refazer a imagem.
Tabelas: Não vou nem comentar, apenas fuja de tabelas para montar o layout .
Elementos extras: Podemos simular inserindo um elemento (div, span, etc.) antes e depois do box, mas não é aconselhável, uma vez que “suja”
o código com tantos elementos dispensáveis.
JQuery: É, na minha opinião, a melhor forma de conseguir esse efeito. Além de leve, permite escolher entre vários tipos de bordas diferentes.

Vamos ver agora como utilizar o JQuery Corner:

1) Carregue os arquivos JS

1 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

2 <script src="http://jqueryjs.googlecode.com/svn/trunk/plugins/corner/jquery.corner.js" type="text/javascript"></script>

Carregamos a última versão do JQuery e o arquivo JS com a programação necessária para a aplicação das bordas.

2) Inicialize o plug-in

1 <script type="text/javascript">
2 $().ready(function() {
3 $(".cantosarredondados").corner("10px");
4 });
5 </script>

Na linha 3, aplicamos a borda arredondada em todos os elementos com a classe cantosarredondados. Para aplicar em um determinado elemento (DIV,
por exemplo) é só colocar #nome_do_dia.

3) Selecione os elementos que terão os cantos arredondados

1 <div class="cantosarredondados">Olá, este DIV possui bordas arredondadas!</div>

Pronto, o DIV acima terá cantos arredondados. O plug-in oferece uma variedade grande de formas para os cantos.

Veja alguns exemplos de DIVs com cantos personalizados ou faça download do exemplo.

1 de 1 30/09/2009 00:24