¿Como hacer esquinas redondeadas?

Categories: CSS, Diseño - Tags: CSS, maquetación

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.

1
2
3
4
5

<div id="main">
Aqui va todo nuestro texto
</div>
<div id="mainBottom">
</div>

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)

1
2
3
4
5
6
7
8
9
10
11
12
13

#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;
}

Eso sería todo, puedes ver una demo y bajar el codigo fuente: