Para isso, além do JQuery, você precisa instalar o plugin JQuery Corner.
Primeiramente, para usar o plugin, você precisa importar o JQuery e o JQuery Corner adicionando as seguintes linhas entre as tags <head></head>:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
Lembre-se o que o conteúdo do src pode variar de acordo com a localização do JQuery e do JQuery Corner no computador.
Vamos usar o código HTML abaixo como exemplo:
<html>
<head>
<style type="text/css">
#main {
background-color: #0055CC;
color: #FFFFFF;
text-align: center;
padding: 5px 0px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js">
</script>
</head>
<body>
<div id="main">
<h1>yLog</h1>
</div>
</body>
</html>
Para arredondar os cantos da div #main precisamos apenas adicionar as seguintes linhas de código javascript entre as tags <head></head>:
<script type="text/javascript">
$(document).ready(function() {
$('#main').corner("15px");
});
</script>
Onde "15px" define o tamanho da suavização da borda.
Existem outros efeitos aplicáveis aos cantos da div. Veja a documentação do JQuery Corner.
O JQuery Corner facilita muito o trabalho de fazer esse tipo efeito. Você não precisa usar nenhuma imagem, tudo é feito com javascript e o resultado não podia ser melhor.
Eu uso direto os atributos de css para fazer isso. É claro que não dá para esperar muita coisa de navegadores antigos.
ResponderExcluir-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
isso funciona?
ResponderExcluirtentei e não aconteceu nada com minha div.
se alguem puder me ajudar: allan.sduarte@hotmail.com
Funciona sim, verifique se o caminho pro JQuery Corner está correto.
ResponderExcluirExcelente dica ! Só tem um problema, não funciona nos IE's da vida.
ResponderExcluir