Hi Lorel, thanks for that. My only suggestion is to move border-radius below the proprietary code so later versions of understanding browsers aren't confused.
Just to check - to reproduce your code I've nested #content4 inside a <div id=#container"> with a dark coloured background-image. All worked as designed (less rounded corners) until I used the .htc from g code - is that the one you're using?
If so, the issue is the .htc. In rough summery it uses javascript to create a new element, microsofts vml to mess with fill and stroke to create the effect of a round corner, then adjusts position and z-index to stack the target and parent elements. The "clue" is the flash of correctly styled content - which is the time-lapse as the .htc loads. Also that transparency works as designed until the htc is applied.
The issues Two issues here. The first is that you are applying two transforms to the same element. That means the .htc destroys the transparency applied by the filter. This is a known issue.
The second is stacking issues. The rounded corners are there, but stacked behind the background-image on #container. SuzyUk and I looked at stacking last year, and I concluded there is a direct contradiction in the recommendations. Unfortunately that doesn't help when using a script written to deal with what are commonly of as "errors".
Partial solution Did you search on this? The .htc has a history and the usual complex "fixes". But you can achieve rounded borders in ie6 and 7 by setting position:relative on #container. ie8 needs z-index:0 as well. (I suggest a conditional comment to keep all this away from ie9 and other browsers.)
However, the issue of multiple "transforms" means the "transparency" is destroyed and leaves .content4 with an opaque background. That makes it readable - but doesn't deal with the original issue.
I tried additional elements, then "splitting" the components of the .htc to find a solution. But (all credit to the author of the .htc) that's trying to fix problems caused by code that has been written so it creates them. Better to avoid them to start. I also tried other libraries, but on this code, a similar result.
Practical I think the desired effect is doable, but probably requires a combination of javascript/microsoft filters and extra elements, for example setting the transparency and rounded corners on different elements, then "layering" them using positioning. So I would ask if it is critical to have rounded corners as well as opacity in legacy browsers? Unless you can find an existing library that works, this requires a bit of work, and will create code maintenance issues for the future.
Another thought was to identify how much advanced css you plan to use in the code, and if a lot, consider something like ie9.js. It might be possible to use pseudo elements which avoids adding elements to the html. But note I haven't tested to see if that overcomes the issue of being unable to set a transform on a pseudo independent of the parent - and I suspect not.
Finally, if you must, a slight variation on rocknbil's suggestion is transparent images in each corner of an element to simulate rounded corners. cssplay has less complex demonstrations using alpha transparency on a single png to create images with an oval frame.
