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.