How to round the corners of a box using CSS?

[simon2x1]

The css below will create a rectangle fill it with
these color #F6F6F6 but i want to curve the edge of
the rectangle.

.bold {
border: solid 1px #e7e7e7; 
background-color: #F6F6F6;}
 

[Samishii23]

https://developer.mozilla.org/en/css/-moz-border-radius
Look towards the bottom, "Browser Compatibility"

[Markus Igeland]

It's not supported in every browser on the planet, but quite a lot of browsers does support it. Use this code:

#your_box {
border: 1px solid black; /*the box NEEDS to have a border for this to work. The border color can be the same as the background-color.*/
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
 

AFAIK this is supported in Firefox, Safari, Google Chrome and Opera. Don't know about the other browsers.

[drhowarddrfine]

The only "other browser" that doesn't support this is IE, the world's worst browser. But that's to be expected.

[Markus Igeland]

@drhowarddrfine:
There are more browsers out there than Safari, Google Chrome, Firefox, Opera and Internet Explorer. Also, as of IE9, IE supports border-radius. (Source: http://stackoverflow.com/questions/6...r-radius-in-ie).

[drhowarddrfine]

Yes, but 98% of all browsers used are one of those.

IE9 isn't out yet and is a poor choice for anyone since it will be the worst in supporting modern standards and practices in most areas.