Estava pesquisando na internet uma forma de arredondar os cantos de uma div sem a utilização de imagens simplesmente usando o código e uma das opções que achei foi com o CSS3 o problema é que o IE não aceita ainda a utilização de cantos arredondados no CSS3 então achei um plugin do jQuery que faz o trabalho e é aceito no IE ( jQuery Corner – http://www.malsup.com/jquery/corner/ ) no site do desenvolvedor tem varias opções de acabamentos mais vou me deter somente nos canto arredondado normal, segue abaixo o codigo html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cantos arredondados</title>
<!--Chamando os jQuery-->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!--Chamando jQuery Corner-->
<script type="text/javascript" src="https://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<!--Observação: salve estes arquivos no seu servidor-->
<style type="text/css">
<!--
.demo {
background-color: #060;
padding: 10px;
width: 500px;
font-size: 16px;
color: #FFF;
}
-->
</style>
</head>
<body>
<!--Iniciando a configuração-->
<script>
$(document).ready(function(){
$(".demo").corner("round 8px");
});
</script>
<div class="demo">
Demo
</div>
</body>
</html>
Viram como é fácil a implementação, é isso ai galera, por enquanto é só…
Oi, boa noite! Bom, como pude observar, o corner funciona belezinha no ie desde que não esteja com uma imagem de fundo, pois assim sendo, ele deixa a parte que ‘seria’ transparente por conta da borda, de cor clara (branco). Dei uma pesquisada e não achei soloção, tem alguma sugestão ou solução? Valeu! Obrigado!
Olá Michel, uma solução para o seu caso é criar uma estância no jQuery para a imagem que esta dentro da div… por exemplo onde está:
$(“.demo”).corner(“round 8px”);
coloque também:
$(“.demo img”).corner(“round 8px”);
Ai ficaria:
$(“.demo”).corner(“round 8px”);
$(“.demo img”).corner(“round 8px”);
Espero ter ajudado, qualquer dúvida estou a disposição!