Browsers

There is border-radius CSS3 property that makes the angles of the block rounded. Mozilla based browsers support it with vendor prefix -moz- for ages:
-moz-border-radius:2em
Safari also supports it but with -webkit- prefix.

For example to make a block with rounded corners in both Firefox and Safari we can use styles like this:

border:1px solid #ddd;
        background:#E4F2FD;
        border-radius:2em;
        -moz-border-radius:2em;
        -webkit-border-radius:2em

Opera doesn't support this property, but unlike Safari and FF it supports SVG images as backgrounds (since 9.5), so we can rewrite the block styles in SVG and place the image as block background:
SVG:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" rx="2em" ry="2em" fill="#E4F2FD" stroke="#dddddd" stroke-width="1"/>
</svg>

CSS:

@media all and (-webkit-min-device-pixel-ratio:10000),
		   not all and (-webkit-min-device-pixel-ratio:0) {
        :root #content{
                border:0;
                background:url(border.svg)
                }
        }

(The Opera 9.5 only hacking method was taken here).

It looks like this.

But sometimes not all of the corners of the block should be rounded. To achieve it in FF/Safari one can use properties:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

For example, to make all corners exept top right rounded use code:

border:1px solid #ddd;
        background:#E4F2FD;
        -moz-border-radius-topleft:2em;
        -webkit-border-top-left-radius:2em;
        border-top-left-radius:2em;
        -moz-border-radius-bottomleft:2em;
        -webkit-border-bottom-left-radius:2em;
        border-bottom-left-radius:2em;
        -moz-border-radius-bottomright:2em;
        -webkit-border-bottom-right-radius:2em;
        border-bottom-right-radius:2em;

(note: 'border-bottom-left-radius' and other properties "officially" do not exist and can be changes)

To make it in SVG we should not round the angles we need, but round all angles and cover the angles we need to be not rounded with the rectangles:

SVG:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="100%" height="100%" rx="2em" ry="2em" fill="#E4F2FD" stroke="#ddd" stroke-width="1"/>

<rect x="50%" y="0" width="50%" height="50%" fill="#E4F2FD" />

<line x1="50%" y1="0" x2="100%" y2="0" stroke="#ddd" stroke-width="1"/>
<line x1="100%" y1="0" x2="100%" y2="50%" stroke="#ddd" stroke-width="1"/>
</svg>

View how it looks.

The samples in one archive.