How do I make a Web 2.0 like rounded box ?

[OilSheikh]

I am trying to create boxes like these :



How do I do them ? What are they correctly called btw ?

SCAN's homepage is full of them

[streetster]

Try googling for Rounded Corners... examples using css here...

[Fortune117]

You could use images for the backgrounds of each div, or you could make them directly in CSS3 using

border-radius: 15px;

I think its that, anyway. lol

EDIT: Found the CSS3 page documenting border-radius here

I would probably do it like this:



If that makes more sense to you..

[OilSheikh]

I am trying to do something like this



where the top of the box has rounded edges and is coloured and the contents box in the middle is just a regular square and has no rounded edges. I usually see them on so many websites.

[scaryjim]

So do you just want the top corners rounded, or do you want all the corners rounded with a rectangular box in the middle? If you look carefully at the picture you've included , you'll see it has rounded corners at the bottom as well, and may be done using the rounded borders in CSS3. Problem being, not all browsers support CSS3 (I haven't done much web design recently so I don't know how wide support is at the minute - it was absolutely minimal last time I was doing a lot of design).

If you just want rounded corners at the top, the "easiest" way to do it is with multiple divs and images, so you have 3 images, a top left corner, a top right corner, and a middle that you repeat across the middle div. And no, it's not particularly easy, but it does give you pretty good cross-browser compatibility...

[OilSheikh]

So do you just want the top corners rounded, or do you want all the corners rounded with a rectangular box in the middle? If you look carefully at the picture you've included , you'll see it has rounded corners at the bottom as well, and may be done using the rounded borders in CSS3. Problem being, not all browsers support CSS3 (I haven't done much web design recently so I don't know how wide support is at the minute - it was absolutely minimal last time I was doing a lot of design).

If you just want rounded corners at the top, the "easiest" way to do it is with multiple divs and images, so you have 3 images, a top left corner, a top right corner, and a middle that you repeat across the middle div. And no, it's not particularly easy, but it does give you pretty good cross-browser compatibility...

Tnx for your post. I just need the top bit rounded. It was the closest pic I could find to what I need. Thing's beginning to sound like too much hard work... I guess I'll just use Photoshop and make the top bit and then HTML a table row to it.