<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" ...>

See http://code.google.com/apis/maps/documentation/#XHTML_and_VML

Alexei said on August 20, 2008

Great, FF supports this code too.

Fredrik W said on August 20, 2008

To all the people complaining about "invalid code" -- it's not. XHTML allows you to embedd other XML namespaces and use them with a prefix, just as being done here.

Rogie said on August 20, 2008

I love that you are curious Jonathan. Pretty inventive solution. The only thing that always majorly sucks with this, even when loaded with JavaScript is Firefox 2's lousy -moz-border-radius implementation.

Awesome tinkering. Thanks for sharing.

Daniel said on August 20, 2008

Nice, I've played with VML awhile back thanks for the reminder of its capabilities.

micha said on August 20, 2008

i've tried to automate this with some basic js.
here's my demo: http://pixelficker.com/lab/corners/

some problems with opera and IE7 though. couldn't test IE6.

any thoughts ?

Mark Story said on August 21, 2008

Very nice work Jonathan. The result is a bit awkward, but if the elements were swapped in by javascript or conditional comments it could be a very clean technique.

Jonathan Snook said on August 21, 2008

Thanks Mark. I've been mulling it over and I'd be interested if I could do the same using an htc behavior. In this way, it would be nice to parse the currentStyle on the element, then replace it while applying those styles on the new element. But that experiment is for another day when I have more time. :)

?‰tienne said on August 27, 2008

This should prove very practical, thank you.

Levi said on September 01, 2008

Excellent investigation, Jonathan! I've wrapped your work into a JQuery Plugin. This should help avoid the hassle of all the platform checking.


There's probably some bugs, but I've installed it on my site and it seems to be working. Let me know what you think.

WD Milner said on September 10, 2008

Interesting, in some ways simpler in others more complicated than images and such. I have a small site redesign coming up and may try this out. Thanks for this!

Joseph said on September 28, 2008

Hey , I was just searching the web and actually looking for something else BUT here is how I do my rounded corners and it works in ALL BROWSERS

Here it is:

####### style ##########

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {}
.xb1 {margin:0 5px; }
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#FFFFFF; padding: 5px 5px 5px 5px}

Wrap This

<div class="xboxcontent">




Hope you guys enjoy!

See ya


Dave said on October 01, 2008

Sounds interesting, i'll try it the next time i need rounded corners.

Thomas said on October 17, 2008

Respect! But indeed, there might be, or come a better way. I know that there is already a jQuery plugin for rounded corners. And I guess it's also supported in css3.

Andrew Hypnosis said on November 02, 2008

It definitely seems to work in IE7.

Chris said on December 04, 2008

Seems to work well in IE6 and Safari. Surprising.

Dale Larsen said on December 17, 2008

Want to this see this working with flying colors?!

Drew Diller pulled it off.

Check it out:
Click here

Anonymous said on March 18, 2011

The solution is good. but i was looking for a way to make buttons on my page with round corners without using any images. Is it possible for IE6 on XP with disabled theme?

BruceCH said on March 18, 2011

This is an old thread, but I was playing around with something similar(border-radius.htc) and after many hours of pulling out what little hair I have left, I discovered why my implementation wasn't working. VML doesn't work with MS gradient filters! If there is a gradient filter on an object, you get no viewable VML. Bummer.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.