jQuery-Cycle: border-radius property not acting as expected in Chrome 11

Question

Im using jQuery-cycle to power one of my slideshow and a border-radius property applied to the container div is not working as expected: The "View Content" slide has rounded corners, the other slides dont have any.

#carousel  {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}

My cycle init code:

$('#carousel').cycle( {
        speed: 400,
        startingSlide: 1,
        speedIn:null,
        speedOut:null,
        cleartype: false,
        fit:1,
        width:980,
        delay: 0,
        timeout:0,  
        fx: 'scrollHorz',
        easing: 'swing',
        easeIn:null,
        easeOut:null,
        prev: '#left',
        next: '#right',
        pager: '#pager',
        pagerAnchorBuilder: function ( idx, slide ) {           
        return('<span><b>0'+slide.id+'</b> / 07</span>');       
        },
        updateActivePagerLink: function(pager, activeIndex) { 
                if(activeIndex==0){
                $('#navigation').hide();
                $('#bottombar').css({'margin-top':'22px'});
                }

                else if(activeIndex==1){
                $('#left').hide(); $('#right').show();
                $('#bottombar').css({'margin-top':'540px'});
                }

                else if(activeIndex==7){
                $('#left').show(); $('#right').hide();
                $('#bottombar').css({'margin-top':'540px'});
                }
                else
                {
                    $('#right').show();$('#left').show();
                    $('#bottombar').css({'margin-top':'540px'});
                }               $('#pager').find('span:eq('+activeIndex+')').addClass('activeSpan').siblings().removeClass('activeSpan'); 
                            }


});

Demo: http://rjwcollective.com/equinox/brochure/

Please describe what you expect and how the actual result differs from that. — Sparky
Hey Sparky, I am not getting rounded corners on the carousel container. On this example, rjwcollective.com/equinox/brochure click "view content" on the bottom left. That slide has rounded corners. Wonder what I am doing wrong. — frishi
You should post your HTML code too... the JavaScript you posted has little to do with the CSS of the DIV in question. — Sparky

kei kei · Accepted Answer · 2011-06-06T22:05:42

You are actually getting round corners on your #carousel div (You can test this by adding a red border on #carousel). The reason you don't see it is because the images are absolutely positioned and do not have rounded corners.

If you want to show the rounded corners, you add this rule to your stylesheet:

.carousel_cont {
  padding: 15px 0px;
}

jQuery-Cycle: border-radius property not acting as expected in Chrome 11

1 Answers