How to make rounded corners in Internet Explorer without images [experimental]

Have you ever missed the CSS3 features in IE? If you are a web designer or a Web developer, your answer should obviously be “YES”. The very basic and popular CSS3 feature is to make rounded corners of DIVs and elements. Firefox, Safari, Chrome are now having full support to CSS3 but IE is still far behind in this race. Jonathan Snook, from snook.ca has already found a solution which defines a VML behavior in IE. VML is an XML-based approach that Microsoft came up with and proposed it to the W3C. So, lets now try this method to make rounded corners in IE.

Step 1: You have to define a behavior for VML elements, include the VML namespace and then use the VML syntax. Following code that includes the VML namespace and declares a “v” prefix to be used for all VML elements.

 ns="urn:schemas-microsoft-com:vml" prefix="v" />

Step 2: VML has support for rounded rectangles using the roundrect element. Here is the syntax to define it.

:roundrect arcsize=".02" fillcolor="#000"> Lorem ipsum dolor sit amet, consectetuer adipiscing  >

Step 3: We need CSS support to enable the VML. Here is the syntax:

v\:roundrect  {     behavior:url(#default#VML);     }

Step 4: Now, style this element in CSS, like we do for any other element.

v\:roundrect {     color:#FFF;     display:block;     background-color:#000;     -moz-border-radius:10px;     -webkit-border-radius: 10px;     border-radius: 10px;     padding:20px;     height:100%;       /* IE-specific */     behavior:url(#default#VML);     /background-color:transparent;     }

v\:roundrect {     color:#FFF;     display:block;     background-color:#000;     -moz-border-radius:10px;     -webkit-border-radius: 10px;     border-radius: 10px;     padding:20px;     height:100%;       /* IE-specific */     behavior:url(#default#VML);     /background-color:transparent;     }

That’s it (try a demo below).