How to create background css div/rounded corners?

Question

How can I create the following html/css style (rounded corners, basic background-color) highlighted in red box:

Answer 1

Use the border-radius CSS property to create rounded borders:

-moz-border-radius: 5px;    /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px;     /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */

You can leave out the prefixes, because Firefox 3.6 or old webkit browsers are almost extinct.

Although it's possible to get rounded corners in OldIE (IE8-) using divs+images or PIE.htc , I recommend against it: PIE is not very reliable, and adding several HTML hacks just to get something to work in old IE is a waste.

See also: MDN: border-radius .