Bordas Redondas em HTML

Bordas Redondas em HTML

Há várias maneiras de se criar bordas arredondadas em html. Alguns utilizam imagens para fazer o background dos cantos, porém não é uma maneira muito limpa.

Também há a opção de se utilizar as propriedades CSS seguintes:

[sourcecode language=”<em>css</em>”]border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */[/sourcecode]

Browsers que suportam estas propriedades: Firefox 3.0 ou superior, Flock 2.5 ou superior, Chrome, Opera, Safari.

Não funcionam nos Browsers: Internet Explorer, Opera versão inferior a 10.

Mas uma maneira eficaz é utilizar o pluguin corner do Jquery, que, por ser javascript funciona em todos os browsers citados.

Para utilizá-lo, faça o download do plugin e do jquery. Depois inclua os scripts na sua página:

[sourcecode language=”html”]

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

[/sourcecode]

Depois, basta chamar ao final do body, o comando seguinte, onde você informa o id ou a class de sua div:

[sourcecode language=”html”]

<script>
$(document).ready(function() {
$(".border_test").corner();
});
</script>

[/sourcecode]

Exemplo Completo:

[sourcecode language=”html”]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<title>Border Test</title>
</head>
<body>

<div style=’background:blue’>
test    test    test     test     test     test     test     <br />
test    test    test     test     test     test     test     <br />
test    test    test     test     test     test     test     <br />
test    test    test     test     test     test     test     <br />
</div>

</body>
<script>
$(document).ready(function() {
$(".border_test").corner();
});
</script>
</html>

[/sourcecode]

Mais exemplos e documentação:
//jquery.malsup.com/corner/

Site jquery:
//jquery.com/

Gostou? Compartilhe!
luis