curvycorners image inside div issue

Question

I am using jquery curvy corners. I know another plugin named jquery corner is available, however it's file size being massively bigger than curvy corners, I decided to with curvy corners.

I have a markup like:

<div class="roundedBox" style="border-width: 4px; margin-left: 10px; margin-right: 10px;
margin-top: 10px; margin-bottom: 10px; border: solid 4px #008FD9;">
    <asp:Image Width="140"  ID="innerImg" runat="server" style="overflow:hidden;" />
</div>

and then in js I do:

 curvyCorners.addEvent(window, 'load', initCorners);
        function initCorners() {
              var settings = {
              tl: { radius: 20 },
              tr: { radius: 20 },
              bl: { radius: 20 },
              br: { radius: 20 },
              antiAlias: true
             };
             curvyCorners(settings, ".roundedBox");
         }

Problem is my image is overlapped on top of div and looks very ugly. How can I resolve this?

Attached is the image which shows the problem:

Answer 1

I am not sure how the plugin works but it seems you need to apply the same styling to the image as you did the div.

Only make the radius 16 though to account for the image border.

Answer 2

尝试添加overflow:hidden在.roundedBox CSS类中。

Answer 3

我不熟悉弯曲的角落，但我的直觉说这是一个z指数问题。

Answer 4

curvyCorners does not support image element:

elements cannot be rounded using curvyCorners. Instead, use a element and set the image as the background-image of the .

curvyCorners

I've a lot of issues with this plugin myself, and I had to get rid of it completely, I used malsup round corners instead.