How to get only one rounded corner with border-radius htc hack and MSIE v:roundrect?
- by aarreoskari
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.
