CODEWITHSUNDEEP
cssrounded-corners
Kevin
Kevin

Reputation: 567

Rounded corners on images with CSS

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

Upvotes: 0

Views: 2805

Answers (2)

snuffn
snuffn

Reputation: 2122

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.

Upvotes: 3

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

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.

Upvotes: 0

Related Questions