rounded corners cropping

Question

I am having issues with rounding corners, they keep wanting to crop off on the left side by a few pixels. Below is the code I am using. I've tried increasing numbers and decreasing numbers; I've added a wrapper; I've tried all different solutions I can find for searching, but it still crops off. Can anyone give me a hand since I don't seem to be very handy? And apparently I can't post a picture of what it looks like either.

<style>
.image 
{
    width: 200px;
    position:relative;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -khtml-border-radius: 14px;  
    border-radius: 14px;
    overflow: hidden;
}

#slideshow 
{
    margin:0 0 0 0;
    position:relative;
    width:200px;
    height:133px;
    padding: 10px;
    overflow:hidden;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -khtml-border-radius: 14px; 
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#slideshow > div 
{
    position:absolute;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
$(function() {
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() 
    {
        $('#slideshow > div:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
    }, 3000);
});
</script>


<div id="slideshow">
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
    <div class="image"><img alt="" class="icon-action" src="img url" width="200"/></div>
</div>

Answer 1

I had the very same problem when the border-radius spec came out. Turns out you have to add border-radius to the <img> tag. Then you can either keep or remove the <div>'s border-radius property.