I know this question should be posted on a CSS3 Forum but I can’t seem to find one and thought DW users might have come across an answer.

When the corner radius of an AP Div is defined and an image is placed inside the APD, the rectangular corners of the image are not clipped by the APD box. The image corners actually stick out beyond the rounded corners. Is there a style property that hides the image corners or clips them? I’ve tried setting the overflow to Hidden without success.

This problem came up in the re-design of a Behavior called FileTabs, I wanted the user to experiment with tab rounded corners, drop shadows and linear blends during the design process.

As you know, the radius for each corner is determined by different pixel values for the horizontal and vertical axis. You can see that some of the tab design curves can get a little complex. This would make rounding the image a bit complicated.

Since these tabs would be constantly adjusted during menu design, I needed a solution that didn’t create more work for the user. I found that using the image as the APD’s background did the trick. The corners can be manipulated by Javascript and the image is fully clipped by the APD’s box outline.