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

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

<xml:namespace 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.

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

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 code 2.0 KB

Share or Bookmark this Post:

Comments (10) Trackbacks (0) Leave a comment Trackback

July 20th, 2009 at 12:20 | #1

Prashant

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
July 20th, 2009 at 12:24 | #2

Gaurav

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
July 21st, 2009 at 12:02 | #3

shubhamoy

Thanks a ton. This will solve a big issue since IE doesn’t support CSS3
July 28th, 2009 at 12:38 | #4

Bhavin Prajapati

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

Thanks Dear…

Thanks a lot…
October 24th, 2009 at 23:23 | #5

AG

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
October 24th, 2009 at 23:37 | #6

SachinKRaj

@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.
October 25th, 2009 at 00:32 | #7

AG

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 !
October 25th, 2009 at 00:47 | #8

SachinKRaj

@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
November 2nd, 2009 at 18:16 | #9

anand

Hi AG: i found that for me in IE7 this thing work.. shap is rounded corners.. i check & see
December 10th, 2009 at 18:06 | #10

Zdravko Balorda

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