An Experiment in Rounded Corners
An idea had struck me this afternoon that there might be some technology deep in the depths of Internet Explorer that might unlock the secret to easy rounded corners. Unfortunately, my initial idea fell flat and I was left in the same place I was before. However, bouncing from idea to idea, I thought to try VML. VML is an XML-based approach that Microsoft came up with and proposed it to the W3C. Alas, the proposal never went anywhere but that's neither here nor there.
The syntax to enabling VML is really clunky. You have to define a behavior for VML elements, include the VML namespace and then use the VML syntax. Is it any wonder this didn't capture the hearts of web developers everywhere?
Here is the 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" />VML has support for rounded rectangles using the roundrect element. Here's the basic syntax I've put together including some basic content. Note the v: prefix.
<v:roundrect arcsize=".02" fillcolor="#000">
Lorem ipsum dolor sit amet, consectetuer adipiscing
</v:roundrect>The rounded rectangle has a number of properties, of which the arcsize and the fillcolor are defined here. Unfortunately, I know of no way to declare the fill color via CSS which will leave you defining fill color in two separate places. If you wish to use a background image, you'll need to look into the fill VML element.
The arcsize is relative to the element size, which is unfortunate since box sizes may differ. If your box sizes tend to be around the same size, or you don't mind a little variety, then you could probably set an arcsize without worrying about it too much.
Finally, we need some CSS to enable the VML:
v\:roundrect {
behavior:url(#default#VML);
}Next, let's style this element up for the rest of the browsers (with a little extra for IE to play nice).
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;
}The font color has been defined and the element is set to display:block for all browsers to recognize this unusual element as such. Border-radius gives it that rounded magic. And most importantly, I've used an IE hack to turn the background color off. Otherwise, you'd get a rounded black box on a square black box. In other words, just a square box.
(Feel free to move the hack into its own file via conditional comments, I've only used the hack here to be concise. Although, this disclaimer has destroyed that brevity, but I digress).
Why?
While this "works", it feels so wrong. I wouldn't want to whip this out on a client project. I think it would confuse anybody left in charge to maintain it. Although, the slightly more relevant presentational semantics of wrapping rounded elements with roundrect is almost as slightly enticing—that is, until you decided to square off all containers. Anyways, I digress again.
In any case, this is just that: an experiment. To point out that it could theoretically be done if you felt like it.
One final note, this won't work in IE8 beta 1 but should work in everything from IE5 through IE7.
Feel free to check out the demo page.
Conversation
Very interesting post. I've been looking for a fairly quick & easy way to do rounded corners, not sure this is it but definitely worth exploring.
You're right, that is a very awkward solution. The nearest comparison I can think of is using SVG's within FireFox to fake
-mox-border-radius.Here's hoping for CSS3 and HTML5 to be put into standard use before we retire. :D
This is cool, but can you whip up a testcase page for the examples?
@Lim Chee Aun: I've now linked up a demo page.
Thanks, Jon. I wonder if this can be done via Javascript to create the VML elements, replacing div's that require rounded corners and display them only on IE.
While such browser-specific features should probably never see the light of the real world, they are still nice to see implemented by somebody. This should be handed over for standardization methinks :)
the code is not valid. I'd rather use only the moz specs on a div, or images of the corners for a fluid design, or just normal css for a fixed width design
I was just looking at this yesterday. Meaning I was trying to get the most cross-browser lightest code for those rounded corner. Using the -moz-border-radius, the -webkit-border radius, the svg background for Opera.
I'll have a look on how that VML could fit in a real world situation (floated/absolute positionning etc...).
Crossbrowser solution. I added some SVG for Opera.
Wow, that is very interesting - how do people stumble across stuff like this?
@Nikita cheers for that link
To be honest, if someone were going to the trouble of adding a bunch of extra DOM nodes just to get rounded corners, I think that this would definitely be a better solution. I would agree that having a non-standard element in my markup would make me uneasy though (unless its injected at runtime in IE, at which point you kinda lose what you gain in simplicity from this technique). I'm not really into to the whole rounded corners fad anyways though, prefer to keep it stylized like your site.
Google Maps relies on VML too, which is why they suggest adding the VML namespace to any page embedding one. Their suggestion is a bit simpler, as it's just an additional attribute on the <htmL> tag:
<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
Great, FF supports this code too.
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.
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.
Nice, I've played with VML awhile back thanks for the reminder of its capabilities.
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 ?
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.
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. :)
This should prove very practical, thank you.
Excellent investigation, Jonathan! I've wrapped your work into a JQuery Plugin. This should help avoid the hassle of all the platform checking.
http://jcorners.culturezoo.com/
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.
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!
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">
YOUR CONTENT HERE
</div>
</div>
Hope you guys enjoy!
See ya
Joe
Sounds interesting, i'll try it the next time i need rounded corners.
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.
It definitely seems to work in IE7.
Seems to work well in IE6 and Safari. Surprising.
Want to this see this working with flying colors?!
Drew Diller pulled it off.
Check it out:
Click here
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?
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.