Menu
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.
705
CSS Syntax border-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
Your problem is unrelated to how you have set border-radius . Fire up Chrome and hit Ctrl+Shift+j and inspect the element. Uncheck width and the border will have curved corners. Show activity on this post.
The radius to use when drawing rounded corners for the layer's background. Animatable. iOS 3.0+ iPadOS 3.0+ macOS 10.5+ Mac Catalyst 13.0+ tvOS 9.0+
I was able to get it to work with border-radius: 0 0 10px 10px; and htc from http://css3pie.com/
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
