Nivo Slider – round corners with CSS3 and jQuery

Soo my web designer loves round corners. I mean really, really loves. Everything would be ok if setting it was simple. Well, I always thought that it is. 

The solution works with Nivo Slider in ver 2.3

To get rounded corners you need to add declaration like this to your rule

{
  border-radius:5px; 
  -moz-border-radius:5px; 
  -webkit-border-radius:5px;
}

That way we’ve got every 4 corners rounded. Of course remember that in IE8 and lower you can’t see this effect.

When using Nivo Slider turns out, that simple declaration like border:radius is not enough. The rounded corners was visible at beginning and then were lost. I tried with #slider img, a and so on, but nothing worked. Then I looked how slider works and what he really shows and I came up with this (i think) really simple solution. Basically slider is showing slices “glued” together, not original picture. That was it.

So my solution for this problem ladies and gentleman is:

» Add afterLoad function to script like below

$('#slider').nivoSlider({
  [other options here if you have any]
  afterLoad: ( function(){

   //round top left corner and bottom left corner of first slice
    $('.nivo-slice').first().css({
      '-webkit-border-bottom-left-radius': '5px', 
      '-webkit-border-top-left-radius': '5px', 
      '-moz-border-radius-bottomleft': '5px', 
      '-moz-border-radius-topleft': '5px', 
      'border-bottom-left-radius': '5px', 
      'border-top-left-radius': '5px'
    });
   
   //round top right corner and bottom right corner of lastslice
    $('.nivo-slice').last().css({
      '-webkit-border-bottom-right-radius': '5px', 
      '-webkit-border-top-right-radius': '5px', 
      '-moz-border-radius-bottomright': '5px', 
      '-moz-border-radius-topright': '5px', 
      'border-bottom-right-radius': '5px', 
      'border-top-right-radius': '5px'
    });
  })
});

» Add css declaration to class .nivoSlider and img like below

.nivoSlider,.nivoSlider img{
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

Online example

Of course you need jQuery for this.

The solution works with Nivo Slider in ver 2.3