2

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 the corners of the image lay over the border corners.

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

Any ideas?

Thanks

Lee

Lee
  • 1,280
  • 4
  • 18
  • 35

3 Answers3

1

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.

Declan Cook
  • 6,066
  • 2
  • 35
  • 52
  • that's cool and all it requires that the image be a background image of the div – mcgrailm May 25 '11 at 14:36
  • Yeah it does and it requires the width and height be set for the div as well but its the only way to get rounded images with a border, with out processing the image in someway. – Declan Cook May 25 '11 at 14:43
0

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

Community
  • 1
  • 1
mcgrailm
  • 17,469
  • 22
  • 83
  • 129
  • ok cool i might try that... nevertheless this isn't the main issue :-) – Lee May 25 '11 at 13:47
  • 2
    not working in my chrome browser, the image still overlays the border – Lee May 25 '11 at 13:58
  • 2
    The overflow:hidden only hides things outside of the clipping area, the border on the element is within the clipping area so it still displays over it. But if you look you can see the image doesn't display past the border. It might be worth putting a second div in there for the border or something like that. – Declan Cook May 25 '11 at 14:02
  • @Decad Thats a great explanation that i was thinking too but its a bit messy overlaying a div just for the border lol – Lee May 25 '11 at 14:05
  • It is yes, i can't think of a way to get what you want. – Declan Cook May 25 '11 at 14:09
  • whats the best way of exactly overlaying another div though ? – Lee May 25 '11 at 14:13
0

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/

Rob Sobers
  • 20,737
  • 24
  • 82
  • 111