How to create a rounded corner background box using CSS?

Question

How to create a rounded corner background box using CSS?

Answer 1

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

Answer 2

This is only supported in CSS 3.