search

matsubarakentaro / curved-corner

Automatically exported from code.google.com/p/curved-corner
0 stars 0 forks source link

Border Radius Doesn't Work in IE when wanted only for one or two side. #47

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?
Fix

What version of the product are you using? On what operating system?
latest Version, Windows

Please provide any additional information below.
-moz-border-radius-topleft: 10px; 
-webkit-border-top-left-radius: 10px; 
border-top-left-radius: 10px; 
behavior: url(border-radius.htc); 

Now this won't work in IE

Original issue reported on code.google.com by productr...@gmail.com on 17 Jul 2010 at 6:33

GoogleCodeExporter commented 9 years ago 
Since this script uses the Vector Markup Language one would have to find a way 
to parse either CSS Properties like border-top-left-radius or the values of 
properties like border-radius: 0 0 18px 18px and apply these values in some way 
on the arc or some other element of VML. The whole Script relies on the 
roundrect element.

If one would like to have only top or bottom curves one could use the following 
workaround and build either dynamically or statically a DIV-wrapper around the 
curved element set this to the height of the curved element (keep in mind that 
the height includes all margins, borders and paddings) and overflow to hidden 
and increase the height of the curved element to the border-height in px. e.g.: 
height of 50px and border of 18 px --> new height of 68px

To remove top or bottom curves one could apply "position: relative" to the 
curved element and "top: +/-<curved border value>px". Haven't checked it in old 
versions of IE though. Using VML to achieve this might be more elegant. :-)

Original comment by rsche...@gmail.com on 17 Jul 2010 at 6:02

GoogleCodeExporter commented 9 years ago 
Feedback about whether it's working or not is very much appreciated by me and 
future visitors. The web never forgets. ;-)

Original comment by rsche...@gmail.com on 17 Jul 2010 at 8:54

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
This issue is the same as Issue 43: "border-top-right-radius etc. does not 
work."
Also, Issue 39: "Suggestion for additional line of code" offers a suggestion on 
how to solve this in VML and Issue 22: "Many improvements" actually offers a 
working (although possibly not fully complete) implementation.

Original comment by benpeachey on 6 Aug 2010 at 9:49