CSS. Rounded Corners. Partea I

In acest post o sa va descriu cum am facut ca un bloc sa aiba colturile rotungite, asa cum e la moda in spatiul Web. In imagine se vede mai clar care este "produsul" final.

Tin sa va zic ca sunt mai multe modalitati de a face acest lucru, eu l-am facut in felul urmator:
In primul rind am taiat un footer si un header de la blocul din design. care contine partea de sus si partea de jos a colturilor, cam asa ceva:

Restul este facut in cod:

Codul HTML

<div id="container">

        <h2>Lorem ipsum Header</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in

        hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu

        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim

        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait

        nulla facilisi.</p>

    </div>

Codul CSS

 #container{
    width:530px;
    background:url('images/round-foot.gif') no-repeat bottom left;
    padding-bottom:1px;
}

#container h2{
    background: url('images/round.gif') no-repeat top left;
    text-align:center;
    margin:0;
    padding:0;
}
#container p{
    padding:10px 20px 20px 20px;
    margin-top:0;
    margin-left:2px;
    background-color:#4F96ED;
}

In postul urmator o sa descriu cum am facut un bloc "rounded corners" care se intinde pe orizontala.