Maquetar: Redondear DIV con CSS

Muchas veces recurrí cuando tenia que presentar aplicaciones para Internet en el Tecnológico a bajar diseños prefabricados para poder hacer mi web "bonita", que si bien son muy buenos y ayudan para salir del apuro rápido te dejan ese saborsito de no saber como hacen cierta cosa.

Actualmente estoy programando web la mayor parte del tiempo y me tope con la inquietud de ya no depender de esas plantillas que hay por la web y decidí hacerme mis propios diseños, aclarando que no soy diseñador web pero me interesa la idea de poder hacer mis propios diseños desde 0.

A continuación muestro un ejemplo de como redondear con CSS los bordes de una etiqueta div que contiene todos mis demas divisiones, por cuestiones de espacio solo colocare el código importante que hace esa función que estaba buscando.

Para redondear el contorno de un div se utiliza la siguiente sintaxis en un archivo css:

#div {
border-radius:30px;
-moz-border-radius:30px 30px 0px 0px; 
-webkit-border-radius:30px 30px 0px 0px; 
border:1px solid #707070;
}

La instrucción webkit.-border-radius sirve para redondear solo las esquinas que quieras redondear con la siguiente forma de hacerlo.

webkit-border-radius: esquina-superior-izquierda esquina-superior-derecha esquina-inferior-derecha esquina-inferior-izquierda;

Es muy fácil su uso, un demo de como se ve acá, la cual contiene un contenedor principal dentro del 3 divisiones cabecera,cuerpo y pie, lo único que hice fue colocarle ese estilo a la cabecera y al pie para dar  esa vista de redondeado de esquinas.

Saludos.