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
精彩评论