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/