带有CSS的图像上的圆角

Question

Did some investigating in this forum and others but I can't quite figure out what the problem I'm having is..

I set a border-radius on an class within a slider and it starts off with rounded corners, but as each image comes through with the next slide, they revert back to non rounded.

The website in question is here: http://goo.gl/8i8g2

and the promo image section is the one I'm having trouble with..

Fixed the link

Answer 1

I think you need to add:

.nivo-slice
{
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}

to your CSS file.

Edit:

As Edward Ruchevits pointed out below, you may also want to add:

-khtml-border-radius:15px;
-o-border-radius:15px;

to support other browsers.

And this should work fine in >IE9. You may also want to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to your header.

Answer 2

By the way, snuffn 's answer is not complete, there are two more options: for old IEs and for Linux users.

.nivo-slice
{
    behavior: url("border-radius.htc");

       -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
     -khtml-border-radius: 15px; /* Linux browsers */
            border-radius: 15px; /* Opera 10.50, IE and CSS3 */
}

To use behavior , you'll need to download the appropriate file from Google Code .