Compatible with css3 rounded corners of all browsers

Solve the problem that css3 rounded corners are compatible with all browsers. This article mentions a good solution to achieve cross-browser rounded corners.

Some time ago, I often receivedBorder-radiusAttribute to achieve rounded HTML elements. You may know that the border-radius attribute of css3 is supported by browsers such as safari, Firefox, and chrome, but IE does not support it for some reason.

 

To achieve rounded corners in IE, you have to use some tips, such as using CSS classes with background images.

What I know is that the simple and quick solution to achieve rounded corners in various browsers is to combine css3 and JavaScript.CurvycornersIs a free JavaScript library that creates beautiful rounded corners for HTML elements. The effect is as follows:

The biggest advantage of this script is that it can use the native css3 attribute in Safari/Chrome/Firefox (through-WebKit-border-radiusAnd-Moz-border-radiusPrivate attributes are supported) while Javascript is used in IE and opera.

All you need to do is introduce curvycorners. js in the page:

 
<Script Type="Text/JavaScript" SRC="Curvycorners. js"> </Script>
 

Then define the following style:

. Roundedcorners {  Width  :   220px  ; Padding  :   10px  ;  Background-color  :   # Ddeef6  ;  Border  :  1px   Solid   # Ddeef6  ;   /* Do rounding (native in Safari, Firefox and chrome )*/ -WebKit-border-radius:   6px  ; -Moz-border-radius :   6px  ;   } 

Then define the following after the above StyleCode:

 < Script Type =  "Text/JavaScript"  > Addevent ( Window ,   'Load' , Initcorners )  ;  Function Initcorners (  )   {  VaR Setting =   { TL :   { Radius :   6   }  , Tr :   { Radius :   6   }  , BL :   { Radius :   6   }  , BR :   { Radius :   6  }  , Antialias :   True  } Curvycorners ( Setting ,   ". Roundedcorners"  )  ;  }  </ Script > 

TL,Tr,BL,BRThey are: top-left, top-right, bottom-left, and bottom-right ).

 

If you have different CSS classes (such as roundedcorners, roundedcorners_1, and roundedcorners_2), you can define them as follows in the previous Code:

... Curvycorners(Setting, ". Roundedcorners");Curvycorners(Setting, ". Roundedcorners_1");Curvycorners(Setting, ". Roundedcorners_2");...
 

The HTML code is as follows:

<Div Class="Roundedcorners"> </Div>

Effects in various browsers