CODEWITHSUNDEEP
slider
Erik
Erik

Reputation: 5791

NIVO Slider Round Corner Problem

Please visit my site.

If you look at my slider you will find the first slide is perfect, but all other slides have white corners ONLY on the bottom of the images.

I can't figure this out! I solved the problem initially by giving the slices round corners, but then the transition effect would leave the image looking cut up with round corner slices.

Can anyone make suggestions here? It's driving me crazy!

Upvotes: 1

Views: 5518

Answers (4)

Henry
Henry

Reputation: 21

.nivoSlider {
    position:relative;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;     
}

This might help. Works for me!

Upvotes: 2

Reda Lemeden
Reda Lemeden

Reputation: 1017

This modified Nivo Slider script is what you might be looking for: http://web3o.blogspot.com/2011/02/jquery-nivo-slider-with-css3-round.html

Upvotes: 5

jbwharris
jbwharris

Reputation: 720

I found a solution for this, it does require a bit of compromise with NivoSlider though. The only way I could get it to work is to make it so there is only 1 slice in the slider, so depending on your perspective that may be workable or not.

Then you just apply border-radius to nivo-slice and the slider wrapper elements and you should be in business. This did work with CSS3PIE too, so I was able to get cross browser compatibility with it.

Upvotes: 0

Daria
Daria

Reputation: 753

Looks like the problem is in elements with class attribute set to "nivo-slice". Probably, this snippet will fix the problem:

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

Upvotes: 6

Related Questions