Hace 6 meses se toco este tema. Y como se aconseja abrir un nuevo tema, aquí está
Con jquery es sencillo lograr bordes redondos.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.corners.js" type="text/javascript"></script>
<script src="jquery.corners.min.js" type="text/javascript"></script>
<script>$(document).ready( function(){ $('#cabecera').corners("10px"); });</script>
</head>
<body>
<div id="cabecera" style="background-color:#808080;">Esto es un ejemplo: round</div>
</body>
</html>
Esto logra eso, redondear los bordes, pero hay alguna que otra pega.
Primero, este código en safari 4.0+ no funciona ¿?
Segundo, excepto en firefox, el resto de navegadores (explorer, chrome, opera) triplican el alto de la capa. Firefox no... y esto solo pasa cuando se le pasa un parámetro a "corners("10px"), si va sin parámetro "corners()" no triplica el alto, lo aumenta, pero no tanto. ¿Cómo se puede evitar esto? porque la verdad hace muy feo y puede descuadrar mucho la web.....
Tercero, si la capa tiene un width en firefox no pasa nada, pero explorer no lo cumple y lo descuadra todo. Lo cual es otro gran incoveniente....
Gracias