Hay muchas formas de hacer esquinas redondeadas yo voy a mostrar como hacerlo de la forma mas simple usando solo 2 div y sin necesitar hacks ni javascript ni ningun otro truco raro
HTML de las esquinas redondeadas
La idea es poner un div con las esquinas redondeadas de arriba y que ademas contenga nuestro texto y un div con las esquinas de la parte de abajo.
[cc lang=»html»]
[/cc]
Estilos para las esquinas redondeadas
El problema de las esquinas redondeadas es que la imagen de fondo debe ser lo suficientemente grande para que no se corte, o usar 3 divs para que uno sea la parte superior, otro el medio y el borde de abajo, prefiero usar solo 2 divs, el superior con un borde muy grande eso no es problema ya que al ser mayormente blanco jalará 1 o 2 Kb mas (osea practicamente nada)
[cc lang=»css»]
#main {
width:605px;
background-image:url(img/main_bg.png);
background-repeat:no-repeat;
padding:40px;
margin:auto;
}
#mainBottom {
background-image:url(img/main_bot_bg.png);
width:685px;
height:40px;
margin:auto;
}
[/cc]
Eso sería todo, puedes ver una demo y bajar el codigo fuente:
