¿Como hacer esquinas redondeadas?

por | Feb 26, 2009 | CSS, Diseño | 1 Comentario

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:






1 Comentario

Trackbacks/Pingbacks

  1. usuario - [...] un post anterior expliqué como hacer esquinas redondeadas sin muchos líos usando imágenes sin embargo usando CSS3 [...]