Rounded corners in bxSlider

Question

I need rounded corners in bxSlider.

I have this code but with js it isn't work:

#slider_mid {
    width: 940px; 
    height:374px;
    margin:0 auto;
    border-radius: 100px; 
    overflow: hidden; 
    background:#093;
}

Answer 1

add this at the end of your bxSlider CSS file

.bx-wrapper, .bx-viewport, .bx-wrapper img {
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

Answer 2

I know this is old, but I ran into the issue as well and fixing it was simpler than you may think. The problem is BxSlider adds a z-index of 50 to its elements.

Add a higher z-index to your element with the border-radius and ta-da! (I add a position as well because z-index won't work on non-positioned elements.)

#slider_mid {
    width: 940px; 
    height:374px;
    margin:0 auto;
    border-radius: 100px; 
    overflow: hidden; 
    background:#093;
    position: relative;
    z-index: 100;
}