Child element not inheriting parent's curved edges?

I have a carousel at my page. I have both the parent element and the child element's edges curved but when you press "Next" or "Previous" and slide the carousel the child doesn't stay curved when mov开发者_高级运维ing. How can I prevent this?

.holder {
width:650px;
margin:200px auto;
overflow:hidden;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#s7 #posts {
width: 620px; 
padding: 15px; 
color: #333; 
font-size: 14px; 
text-align:left; 
background:#EEE;
line-height:16px;
min-height:500px;
overflow:visible;
z-index:-1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Actually, I'm willing to bet that it does stay curved, it's just a little to fast to see. It doesn't look curved because you're seeing the middle of it while it's animating which, of course, is not curved (e.g. you're seeing the TOP of the box, not the top-left corner).

add the radius to the parent div#s7 and you should be set.

Be sure you're passing the border-radius CSS into the JavaScript, or rather, make sure JS/JQuery isn't removing it.

Using Firebug, I can see that there is no border-radius property assigned to all of the <div>s that are generated. Adding that attribute within your JS should remedy the problem.