Need help with Img within Div tag shows above curvy border

I am trying to get a curvy border that works in all browsers which i think have i have achieved now with a curvycorner.js add on i have found.

The trouble i am having now is that if i put an img in the div 开发者_如何学Cthe corners of the image lay over the border corners.

example here, http://www.cozeez.co.uk/offline/test.php

Any ideas?

Thanks

Lee

The only real answer i can think of is to do it with CSS.

check this JSfiddle

http://jsfiddle.net/gty2G/4/

Set the image as the background to the div.

You just need to add overflow:hidden to the .myBox style declaration. The fix is more apparent when you use an image with a darker background:

http://jsfiddle.net/rsobers/gty2G/

edit your right you just need to add overflow hidden

.myBox {


    display: inline-block;

    text-align: left;

    border-top: 3px solid #0F0;

    border-bottom: 3px solid #0F0;

    border-left: 3px solid #000;

    border-right: 3px solid #000;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

overflow:hidden
}

heres a demo

MORE INFO check out css3-rounded-corners-hide-overflow-in-chrome-opera