0

Here is my site: http://splash.inting.org/wp/

On the right sidebar, I have two elements, the reg form on top and the small slider at the bottom. Both have the same border-radius styles implemented but the one in the bottom does not have the curved borders rendered in Chrome. I already applied overflow: hidden.

Things to take note:

  1. both elements (registration and slider) have same border-radius styles applied but in chrome, only the registration is rendered with correct border styles
  2. the border-radius renders correctly in firefox and even in IE

Any ideas? Thanks!

CHROME:

enter image description here

FIREFOX:

enter image description here

AnimaSola
  • 7,146
  • 14
  • 43
  • 62

1 Answers1

1

Apply the border radius directly to the image.

.meteor-slides .mslide img
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
MLM
  • 3,660
  • 3
  • 41
  • 66
  • I'm trying to avoid that since not all sidebar elements will have images. But if that's the only work around I will try it. I'll give some feedback once I get it done. Thanks @MLM! – AnimaSola Nov 15 '12 at 03:04
  • @AnimaSola If it is other kind of content then the border-radius on the parent should take care of it. So they will work in conjunction. – MLM Nov 15 '12 at 03:32