css - 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

I was able to get it to work with border-radius: 0 0 10px 10px; and htc from http://css3pie.com/