How to get only one rounded corner with border-radius htc hack and MSIE v:roundrect?

Question

I have a problem with partially rounded corners. See the first working example for most browsers:

.box {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: yellow;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

You can see that only bottom right corner should be rounded. Natural choice would be adding a border-radius.htc hack inside a conditional IE statement:

.box {
  border-bottom-right-radius: 20px;
  behavior:url(border-radius.htc);
}

This is not working because border-radius.htc file is only accessing normal border-radius value (this.currentStyle['border-radius']). VML used by the hack is roundrect which only supports one percentage value for arcsize.

So I was wondering if there is any other way around the problem by using some other VML elements?

Another problem is that htc-file doesnt's support borders but that can be fixed with VML's stroked attribute. Nifty corners for example doesn't work well with corners at all.

Answer 1

Not really sure I understand what you're after but I use Curvy Corners to curve my corners in IE. It's relaly simple, it reads any of the -webkit- corner attributes in your CSS and applies it to IE.

Hope that helps.