Borde redondeado para la parte inferior

Lo mismo que hemos hecho con la parte de arriba podemos volver a hacerlo para la parte inferior de la página para conseguir un mejor aspecto. Te lo recuerdo paso a paso y así terminas de pillarlo, vale?

1.- Creamos una nueva capa en plantilla.html llamada curva-inferior sin ningún contenido dentro. La colocamos al final de todas las capas:

 .....
   <div id="pie">Este es el pié de página</div>
   <div id="curva-inferior"></div>
 </div>
 .....

2.- Abrimos estilo-general.css e incluimos la definicion de la nueva capa curva-inferior que será igual que la de antes pero cambiando el nombre de la imagen de fondo:

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
                  background-repeat: no-repeat ;
                  width:800px ; 
                  height: 12px
				  overflow: hidden }

3.- Quitamos el borde de abajo de la capa pie (ya sabes, eliminamos border: black 1px solid que da borde a los cuatro lados y añadimos los tres lados que queremos, left, right y top) y además le ponemos color blanco (white) de fondo a esa capa:

#pie { background-color: white ; 
       border-left: black 1px solid ; 
       border-right: black 1px solid; 
       border-top: black 1px solid }

Repito, he eliminado el border: black 1px solid que le daba borde a los cuatro costados y he colocado en su lugar el borde por la izquierda, derecha y arriba solamente.

4 .- Guardamos la hoja de estilo y obtenemos esta visión.