CSS3 rounded corner (border-radius)

Border-radius in CSS3 supports IE9 +, chrome, firefox 2, 3 +, and safari3.2 + browsers.

Border-radius can be used directly without a prefix (Note: firefox13 removes the-moz prefix, that is, the original-moz-border-radius is changed to border-radius, adding a prefix will make it impossible to display the rounded corner. chrome can add a prefix or a prefix without a prefix) directly add a value after border-radius to determine the rounded corner size, for example, border-radius: 5px;

1. Border:

Effect:

 

2. No border

Add the color code to css.

background: #cc0000;

Effect

 

Complete code without Borders:

3. Four Corners of different sizes

Four Corners of different sizes is particularly simple, use border-radius: 5px 10px 15px 20px; integration is enough.

The following results:

 

The complete code is: