How to create css div background / rounded corners?

How to create the following html / css style (rounded corners, foreground color) highlighted in red:

enter image description here

+7
source share
1 answer

Use the CSS border-radius 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 the prefixes because Firefox 3.6 or older webkit browsers are almost extinct.

Although you can use rounded corners in OldIE (IE8-) using divs + images or PIE.htc , I recommend against this: PIE is not very reliable, and adding a few HTML hacks to make something work in old IE is empty a waste.

See also: MDN: border-radius .

+18
source

All Articles