Bordas arredondadas com jQuery e CSS

Esse é um exemplo simples e prático de como simular bordas arredondadas em imagens utilizando jQuery e CSS. Não existe nenhum mistério, basta criar uma imagem com os 4 cantos arredondados, alguns estilos CSS e um simples script em jQuery, olha só que moleza :)

border-radius

Veja o exemplo

Bordas
Para dar um efeito mais real, eu aconselho usar um .png ou .gif transparente para suavizar as bordas. Aqui estou usando png com bordas de 3px. Faça o download do PNG.

CSS

.bri {
 position:relative;
}
.bri span {
 background:url("borders.png") no-repeat;
 display:block;
 height:3px;
 position:absolute;
 width:3px;
}
.bri .ctl {
 left:0;
 top:0;
}
.bri .ctr {
 background-position:-3px 0;
 right:0;
 top:0;
}
.bri .cbl {
 background-position:0 -3px;
 bottom:0;
 left:0;
}
.bri .cbr {
 background-position:-3px -3px;
 bottom:0;
 right:0;
}

jQuery

$(document).ready(function(){
 $(".border-radius").each(function(i){
 $(this).wrap("<div id='bri"+i+"' class='bri'>").before("<span class='ctl'></span><span class='ctr'></span><span class='cbl'></span><span class='cbr'></span>");
 $('#bri'+i).css({position:'relative', width:$(this).attr('width'), height:$(this).attr('height')});
 })
});

HTML
Basta incluir uma class=”border-radius” na imagem que você quer aplicar o efeito, não esqueça de definir o width/height.

<img class="border-radius" src="imagem.jpg" width="380" height="167">

Funcionou nos seguintes nos navegadores:

  • IE 7, IE8, Chrome, Safari, Firefox e Opera (Win)
  • Firefox, Safari, Chrome, Opera (Mac)
  • Firefox, Chrome, Opera (Linux)

Se tiver alguma dúvida poste seu comentário.

This entry was posted on domingo, maio 23rd, 2010 at 20:32 and is filed under CSS, Javascript, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Comentários para “Bordas arredondadas com jQuery e CSS”

  1. Vinicius Martin Diz:
    25 de março de 2011 às 21:25

    Muito bom esse tutorial! Pelo que vi aqui está funcionando no IE8 normalmente…

  2. Giovani Diz:
    25 de março de 2011 às 23:12

    Obrigado, qualquer dúvida avise.

Deixe um comentário