İhtiyacım var yuvarlak köşeler bir üst div maske içeriği kendi çocuklar. "taşması: gizli" işleri basit durumlar, ama sonları webkit tabanlı tarayıcılar ve Opera zaman üst konumlandırılmış nispeten ya da tamamen.

Bu Firefox ve Internet Explorer 9 çalışır:

CSS

#wrapper {
    width: 300px; height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute;
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="box"></div>
</div>

Example on JSFiddle

Yardım için teşekkürler!

GÜNCELLEME:Hata, bu soruna neden beri Krom düzeltildi. Re-test Opera veya Safari ancak.

Bu sorun için başka bir çözüm buldum. Bu Y başka bir hata (ya da muhtemelen Chrome) gibi görünüyor, ama çalışıyor. Tüm yapmanız gereken - WebKit CSS Mask eklemektir #kapsayıcı öğe. Tek piksel png bir resim kullanmak ve hatta bir HTTP isteği kurtarmak için CSS ekleyebilirsiniz.

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA oJAAAAAElFTkSuQmCC);
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}​

JSFiddle Example