bordes redondeados separados

buenos dias, despues de intentarlo varias veces no puedo hacer que el borde superior redondeado de la parte 3 del curso tema "redondeo superior", me quede pegado a la cabecera en el html kit. consigo el borde redondeado pero un poquito separado de la cabecera. y en el navegador si que se ve bien.
Que hago ¿lo dejo asi total en el navegador se ve bien o busco la solución?
gracias.




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

<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos al comercio</div>
<div id="navegacion">Barra de navegacion</div>
<div id="contenido">
<div id="menu">
<ul>
  • elemento 1
  • elemento 2
  • elemento 3
    </div>
    <h1>Esta será la zona pincipal de la web</h1>


    Este es un curso muy interesante y espero poder terminarlo pronto y poder seguir desarrollando otras paginas.</p>
    <h3>Inconvenientes:</h3>

    Uno de los principales problemas para cumplir con este objetivo son las interrupciones que van surgiendo a lo largo del día,
    si no es uno es el otro. Siempre viene alguien o llaman por telefono y no se puede ser grosero.
    Así que tengo que ser muy disciplinado para ponerme cada día y no sucumbir a las "tentaciones"</p>
    </div>
    <div id="pie">Este es el pié de pagina</div>
    </div>

    </body>
    </html>
  • Esta linea esta mal:
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: 800px ; height: 12px ; overflow-hidden}

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