Search code examples
google-chromecsscurve

border-radius for specific element not rendered in Chrome


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


Solution

  • Apply the border radius directly to the image.

    .meteor-slides .mslide img
    {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }