IE seems to ignore background properties in css when using it, it shows the image, but doesn't seem to listen to any repeat or positioning instructions.

Furthermore, for me, It does not seem to work in opera (who cares really), but would be nice if possible.

Comment deleted

For Opera support add: -opera-border-radius: 10px;?

isn't working in opera.............plz..............

Will try to figure out background repeating issue.

Opera 10 supports border-radius itself. But as many users are still on 9, we should find a way :)

Opera 10 supports the tag and accepts it as valid, but it does not display the round corners. A user-script or js file would be the only way.

Hi..

This is not working for nested divs in IE. I am trying to display a div inside another div and both of them are of ".curved" class. The outer div shows up fine but i am unable to view the inner one. And also, in IE background properties are ignored. Any solution for this would be of great help..

Thnx, Bittu

For Opera 9.5+ you may want to try this. Have not tried this yet.

http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/ http://files.myopera.com/dstorey/experiments/roundedcorners.html

Hi

I really like the idea of this.. its great. Just adding to comment 5... have you got anywhere with nested divs? Is it worth opening a new issue?

Thanks Mark G

No i haven't found any solution for this. So I stopped using DIVS and went for images to move on with my work...!! :(

I'm finding that its doing away with background images all together (IE8). This happens regardless of how I define the backgrounds (individual 'background-' rules, just 'background' shorthand rule, different repeating styles, color/nocolor etc.)

Actually all it appears to be doing is making the background disappear, it isn't actually rounding the corners (doctype xhtml strict).

I have the same backgrounds problem under IE7 and above, I don't have IE6 available to test with; otherwise, great work!

Please, ignore my previous - I did not realise this ticket was opened (still) even though this has been fixed in the November 18th release.

I noticed CSS "background-repeat" rules are ignored when you use the HTC too (though I really like the script!). Thanks for the discussion as well.

Putting the "behavior" CSS rule in conditional (IE-only) stylesheets didn't fix the problem. So, for now, I repeat the "background-image" rule in my IE stylesheets, calling a different image whose dimensions are far bigger than the "curved" container. A hack, but it'll do for now.

I can't get the demo to work at all in IE8 (with or without comp mode on) on a windows 7 box. ?

This script could be an outstanding fix to legacy versions of IE. However with this background image problem of either ignoring background properties and making the container transparent, or applying background repeat regardless of any other repeat properties being applied. The background on a nested element does not get clipped by its parent either.

Is this script still being developed on? Is work being done into correcting these tickets?

Comment deleted

The script does not support nesting the rounded-corner element within a parent with any sort of background in IE8.

It appears you don't have correct logic in the element's z-index.

The script sets the z-index of the rounded-corner element to -1, and nesting it within a parent puts it behind (sets a lower z-index) than that of the parent .

I can either use no background in the parent (not acceptable) to make the element visible, or raise the z-index of the rounded-corner element to make it visible, but lose the content within the element (again, lower z-index).

To see this, take the border-radius.html in the example zip file and in the CSS for the ".rel" container, add "background-color: white;" and see the result.

This is definitely a deal breaker for me, and I imagine for most. You must be able to nest the divs with rounded corners in a div (read a container/wrapper) that has background.

Not working for me either... anyone found a solution?

We seem to have found a solution, modified htc file is attached.

The vml object (the rectangle with rounded corners) was originally been put onto the page with z-index -1, so it would be behind it's content. This is a problem if there is a containing div with a different background color, so our file modifies this z-index to be 0, then mofifies the element itself (the one where curved corners are been applied) to have a z-index of 1, so it's content appears over the zml shape.

It, works in our case anyway, but it might need modifying a bit more, I could see it not working if the z-index's are been specified a lot (different to default).

The new .htc file fixes the issue where the background image disappeared altogether when it's within a background tag rather than a background-image tag, but for me it's still repeating and ignoring the repeat-x designation.

This seems to fix the background issue for me, however I end up with a rectangular/square div. No round corners.

Thanks for the modified htc above but as jameslikeness said it will have square corners in IE8.

I found a hack on another thread (Issue 32:z-index fails in IE8 http://code.google.com/p/curved-corner/issues/detail?id=32#c1) alex.fairchild suggested to add following properties to parent element and it works flawlessly

border-radius: 0px; behavior: url(border-radius.htc);

I have test this one Comment 20 by paulroskilly, Jun 10, 2010 and work perfectly in all browers

Has anyone here gotten this to work on textboxes? The file posted in Comment 20 got rounded corners to display on texboxes, however, most are not aligned and have z-index issues (can't click into some textboxes).

hi! i tried to use the updated version by paulroskilly, background issues for me has been resolved but no rounded corners were achieved. Anyone please help? (I tested it using IE7.)

Im trying to use it for a message bubble wherein there is a rounded corner with a bubble tip positioned on top.

CSS Code:

shoutout {

background: #1e4c64 url(img/shoutout_bg.jpg) repeat-x top; color: #b1ddf3; padding: 20px 40px; text-align: center; position: relative; }

shoutout img {

position: absolute; left: 140px; top: -12px; }

.rounded { -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px; behavior: url(css/border-radius.htc); }

HTML Code:

Some Text here!

Here's my bugfix version based on v3. Changes: - z-index was not read correctly, now it is - Resolved the stupid bug impacting target elements WITH position relative declared or other complex-positioned layout. This should solve background disappearance and so on. Dont use the (bad) hacks anymore! - removed window_resize code as it was buggy and i failed to see in which situation it was useful, maybe im dumb? - code cleaning, better styling in IE6

I'm working on further improving it, i would like to add event listener to track target element's changes such as 'visibility' from hidden to visible, and so on...

Bugfix updated after more testing. IE defies logic, it seems its implementation of z-index is entirely bullshit. IE7 & IE8 differs in their way to treat z-index and it seems both are wrong... so i had to defy logic too and find a hack which seems to work for both in most situations. Use the new file attached, i deleted the one above.

I also coded a way (with onpropertychange event) to correctly display rounded borders for targets with visibility hidden changed to visible via script (does not work for status changed only with css) but it's not included in this bugfix; tell me if you're interested.

Your new version (comment 27) seems to work flawlessly on IE8, with nesting. Bravo!

Thanks for the correction file. helped a lot!

Hi everybody,

Although this issue page has been of some help, I still can't seem to find a way to show that background color in my dropdown menu. I'm using the htc file in my nice menus css file in drupal. I've been able to get the rounded corners, which is great but I'm now stuck, as I said, on the background color disppearing from my dropdown menus.

Any help would be greatly appreciated.

Still getting an error on line 106

This HTC is not working for anything above simple rounding of a single div. I have some nested DIVs with background (color, not image) and everything gets quite messy. In some tests DIVs disappera, in others Z-Indexes change... total mess.

I wish someone could introduce me to the genius at Microsoft that insisted it is a bad idea to be like everybody else. I just need two minutes with the dude...

I was very much hoping this HTC could do the trick, as HTC is the best cure for the IE illnesses, but this is a no go. HTC should be a simple, plug-once and forget.

My next best option is probably some jQuery rounder that adds a lot of ugly DOM nodes...

Comment deleted

Comment deleted

Beautiful.

how to solve the cornering issues like, i only want to style the upper-;left and right of the div(box). but using this link: <%--[if lt IE 8]> the hole corners are styled. how do i do it?

The version in comment #28 worked for me. I'll speak to rahnas to see if we can get the code updated.

I actually used #20, which I will merge into the svn.

I also tested the one from #28 which didn't fix the bug described here.

Fixed in SVN r3. Please test and report back.

Please provide a test case if possible.

Thanks.

how i solve the curved corner problem in my IE7.. there is no effect of

" border-radius: 0px; behavior: url(border-radius.htc);"

it gives me same problem after adding above code... what should i do?