problema con bordes con curva

no se que ise mal pero los el borde inferior no aparece bien.
Esta es mi plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacion</div>
<div id="contenido">
<div id="menu">
<ul>
  • Partidos
  • Botines y camisetas
  • Juegos
  • Jugadores
    </div>
    <h1>Esta es la zona principla de la pajina</h1>


    La zona principal de la pajina se puede usar para muchas cosas como,por ejemplo
    acceder a la seccion partidos, botines y camisetas, juegos y jugadores. En cada
    parte hay un monton de cosas buenas, ya vas a ver.</p>
    <h2>Gracias</h2>


    Espero que les guste. Gracias por visitar mi web.Nos vemos otro dia y no se olviden
    de volver por favor. </p>
    <div id="pie">Este es el pie de la pagina</div>
    <div id="curva-inferior"></div>

    </body>
    </html>

    Y este es mi estilos-general:

    *{margin:0px;padding:0px;border:0px}
    #cabecera{background-color:white;border-left:1px solid black;border-right:1px solid black}
    #navegacion{background-color:red;border:1px solid black}
    #contenido{background-color:orange;height:150px;border-left:1px solid black;border-right:1px solid black;padding:0px}
    #pie{background-color:white;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black}
    #global{width:800px;margin:4px auto}
    body{text-align:center}
    #menu{background-color:yellow;width:150px;float:left;text-align:left;margin:3px 10px 3px 3px}
    #menu li{list-style:none;margin:4px 0px 4px 6px}
    a{color:green;font-size:1.1em;text-decoration:none;block}
    a:link{}
    a:visited{}
    a:hover{color:red;text-decoration:none;display:block;background-color:black}
    a:active{}
    p{text-align:justify}
    #contenido p{padding:5px 10px 5px 10px;text-indent:15px}
    h1{font-size:1.2em;color:green;font-weight:bold;text-decoration:underline;text-align:center}
    h2{font-size:1.1em;color:green;font-weight:bold;text-decoration:none;text-align:center}
    {border:1px solid black}
    #curva-superior{background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;
    width:800px;height:12px;overflow:hidden}
    #curva-inferior{background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat;
    width:800px;height:12px;overflow:hidden}

    Por favor ayudame y gracias
  • Falto cerrar la capa contenido que puse en rojo

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
    </head>
    <body>

    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegacion</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Partidos
  • Botines y camisetas
  • Juegos
  • Jugadores
    </div>
    <h1>Esta es la zona principla de la pajina</h1>


    La zona principal de la pajina se puede usar para muchas cosas como,por ejemplo
    acceder a la seccion partidos, botines y camisetas, juegos y jugadores. En cada
    parte hay un monton de cosas buenas, ya vas a ver.</p>
    <h2>Gracias</h2>


    Espero que les guste. Gracias por visitar mi web.Nos vemos otro dia y no se olviden
    de volver por favor. </p></div>
    <div id="pie">Este es el pie de la pagina</div>
    <div id="curva-inferior"></div>

    </body>
    </html>