Os cantos arredondados não conseguem cortar o conteúdo nos navegadores de kit da web (por exemplo, Chrome) seposition:relative;

Veja isso demo.

HTML:

<div class="outer">
    <div class="inner">
    </div>
<div>

CSS:

.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

Alguém sabe de uma correção? Obrigado