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:

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 */

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:


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

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


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

Exemplo Completo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>

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

Site jquery:
http://jquery.com/

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s