0

This is the demo(works only in webkit browsers) Demo I have an outer div, which have rounded corners on all four edges. I have a ul list inside it . The list is made to scroll with iscroll. The problem is the list's li items without border-radius is affecting the outer divs, rounded corner. Please see the demo. See the bottom, there will no rounded corner. And once you scroll down , the top will not not have rounded corner.

syed imty
  • 1,018
  • 1
  • 9
  • 27

1 Answers1

1

The border-radius should be on #viewport, but still won't work due to an unsolved bug in Webkit that lets child content appear over the parent's rounded corners: http://code.google.com/p/chromium/issues/detail?id=71639

lanzz
  • 42,060
  • 10
  • 89
  • 98
  • Does this same bug exists in iphones and anroid mobiles – syed imty Oct 28 '12 at 18:43
  • It is a bug in the core Webkit framework, so it very likely applies to all Webkit-based browsers, be they desktop or mobile. You might work around it by using images for the corners; [here's some tutorial found off Google](http://kyleschaeffer.com/best-practices/reusable-transparent-css-rounded-corners/). – lanzz Oct 28 '12 at 18:49