How To Make Rounded Corners In Internet Explorer Without Images? [Experimental]

By on July 19, 2009 in CSS, How To

Rounded Corners in Internet ExplorerHave 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.

Step 2:

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


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;
    }

That’s it (try a demo below). All credit and thanks to Jonathan Snook

Live Demo   Get the code

About SachinKRaj

Sachin is a web application developer, technology blogger and web addict! He has over 6 years of web development experience and he writes tutorials primarily focused on LAMP, Ajax, Api's, jQuery etc. He is usability expert and he always likes to share his knowledge with people.
View all posts by SachinKRaj →

, , , ,

17 Responses to How To Make Rounded Corners In Internet Explorer Without Images? [Experimental]

  1. Prashant July 20, 2009 at 12:20 pm #

    Nice write-up, CSS3 tricks doesn’t works in IE but this IE trick for rounded corners works in all browser. That’s coool. ;)

    Thanks

    Reply
  2. Gaurav July 20, 2009 at 12:24 pm #

    Thanks Sach
    Really, This is very useful for us. I had tried many times to make rounded corner in IE. Finally I got it by your help ;) :)

    Reply
  3. shubhamoy July 21, 2009 at 12:02 pm #

    Thanks a ton. This will solve a big issue since IE doesn’t support CSS3 :)

    Reply
  4. Bhavin Prajapati July 28, 2009 at 12:38 pm #

    I’m very thankful to you.
    Really it’s an amazing solutions for the rounded Corners with browser compatibility.

    Thanks Dear…

    Thanks a lot…

    Reply
  5. AG October 24, 2009 at 11:23 pm #

    Well i found that for me in IE7 this thing doesn’t work, and don’t wanna work, shape is a rectangular :) nothing happens . I’m giving a link hope you will answer for this :) and thanks. Waiting for answer :) here is the link to a proof -> http://img163.imageshack.us/img163/410/notrounded.png

    Reply
  6. SachinKRaj October 24, 2009 at 11:37 pm #

    @AG: Thanks for noticing the issue. My bad, I should let users know that it is an experimental fix. May or may not work with newer version (IE 8). This works when you see the demo with compatibility mode “on”. that means running IE 8 as IE7.

    I have added “experimental” to article title.

    Reply
  7. AG October 25, 2009 at 12:32 am #

    Thanx for quick answer SachinKRaj , i’m just a beginner at web development and design creation :) and thanks for good examples :) hope i will be better after some time :) let’s hope that MS will add fully functional CSS at IE older and newer versions, but i will think that won’t be quick from them :) good job, i will see other examples from you !

    Reply
  8. SachinKRaj October 25, 2009 at 12:47 am #

    @AG: Thanks for appreciating this small initiative. Yes, let’s hope, MS hear our voice and add CSS3 support quickly. ;)

    I am not so frequent in writing articles, but please check back again; I’ll be writing more articles in first week of next month. :) and if I get the response you people are giving; that will surely make me frequent :D

    Reply
  9. anand November 2, 2009 at 6:16 pm #

    Hi AG: i found that for me in IE7 this thing work.. shap is rounded corners.. i check & see

    Reply
  10. Zdravko Balorda December 10, 2009 at 6:06 pm #

    Well, it works on IE7 but not on IE8 except in “compatibility view” which I don’t know
    what it is.

    Reply
  11. arung November 24, 2010 at 8:08 pm #

    hi ag : i found that for me inie7 this thing is work but its not work in IE8

    Reply
  12. Cindrella February 22, 2011 at 12:28 pm #

    I fount it working only with IE9,not working with IE7 and IE8,is it possible to make rounded shape in IE8??

    Reply
  13. Siva July 20, 2011 at 1:47 pm #

    how to make rounded corner button using CSS and make it work in IE7 & IE8

    Reply
  14. bob October 20, 2011 at 6:12 am #

    doesnt work in IE7

    Reply
    • SachinKRaj October 24, 2011 at 4:33 pm #

      Bob, It is experimental and it does not work in IE7. Will be posting an article on supporting CSS3 for IE family very soon. There are bunch of solutions (libraries) available on net which makes this possible by using javascript. Coming this into latest articles very soon.

      Reply
    • Om December 20, 2011 at 12:38 pm #

      my side working in IE7 but not in IE8

      Reply

Leave a Reply