How to create a rounded corner background box using CSS?

How to create a 开发者_StackOverflowrounded corner background box using CSS?

Use this css:

.box_round {
     -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4 */
          border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

And then simply use the class in your HTML like this

<div class="box_round" style="background-color:red">This is a test</div>

I added the background-color:red - just for test puporposes so that you can see the rounded corenrs.

HTH

This is only supported in CSS 3.

Take a look at the CSS3 PIE project. It may help you with the problems related to CSS3 on old IE versions.