Cómo hacer que las esquinas redondeadas CSS3 oculten el desbordamiento en Chrome / Opera

Necesito esquinas redondeadas en un div padre para enmascarar el contenido de su niño. overflow: hiddenfunciona en situaciones simples, pero se rompe en los navegadores basados ​​en webkit y Opera cuando el padre está posicionado de forma relativa o absoluta.

Esto funciona en Firefox e IE9:

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>

Ejemplo en JSFiddle

¡Gracias por la ayuda!

ACTUALIZACIÓN: El error que causa este problema se ha solucionado desde Chrome. Sin embargo, no he vuelto a probar Opera o Safari.

Encontré otra solución para este problema. Esto parece otro error en WebKit (o probablemente Chrome), pero funciona. Todo lo que necesita hacer es agregar una máscara CSS de WebKit al elemento #wrapper. Puede usar una imagen png de un solo píxel e incluso incluirla en el CSS para guardar una solicitud HTTP.

#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 Ejemplo

Agregue un índice z a su elemento de radio de borde y enmascarará las cosas dentro de él.

Sin importarles a todos, logré resolver el problema agregando un div adicional entre el contenedor y la caja.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

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

HTML

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

¡Gracias a todos los que ayudaron!

→ http://jsfiddle.net/5fwjp/

opacidad: 0.99; en el contenedor resuelve el error del webkit

Parece que este funciona:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Compatible con el último Chrome, Opera y Safari, puedes hacer esto:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

¡Definitivamente deberías consultar la herramienta http://bennettfeely.com/clippy/ !

No es una respuesta, pero este es un error archivado bajo la fuente Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Desafortunadamente, no parece que haya alguien trabajando en ello. :(

cambie la opacidad del elemento primario con el borde y esto reorganizará los elementos apilados. Esto funcionó milagrosamente para mí después de horas de investigación e intentos fallidos. Fue tan simple como agregar una opacidad de 0.99 para reorganizar este proceso de pintura de los navegadores. Echa un vistazo a http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

En cuanto a mí, ninguna de las soluciones funcionó bien, solo usando:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

en el elemento contenedor hizo el trabajo.

Aquí el ejemplo: http://jsfiddle.net/gpawlik/qWdf6/74/

basado en la excelente respuesta de graycrow ...

Aquí hay un ejemplo más real del mundo que tiene dos divs ciculares con algún contenido de relleno. Reemplacé el fondo png codificado con solo un valor hexadecimal, es decir

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

se reemplaza con

-webkit-mask-image:#fff;

Ver este JSFiddle ... http://jsfiddle.net/hqLkA/

Aquí mira cómo lo hice; Jsfiddle

Con el Código que puse, logré que funcionara en Webkit (Chrome / Safari) y Firefox. No sé si funciona con la última versión de Opera. Sí, funciona con la última versión de Opera.

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

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

Intenté cada respuesta pero sin éxito. Después de algunas horas de investigación, encontré una solución para este problema. El uso de estas propiedades en su clase no permitirá que los elementos div desborden el contenedor.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Si está buscando crear una máscara para una imagen y colocar la imagen dentro del contenedor, no establezca el atributo 'position: absolute'. Todo lo que tiene que hacer es cambiar el margen izquierdo y el margen derecho. Chrome / Opera se adherirá al desbordamiento: reglas ocultas y de radio de borde.

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }