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

Encontré otra solución para este problema. Esto parece otro error en WebKit (o probablemente Chrome), pero funciona. Todo lo que necesita hacer - es añadir una máscara CSS 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 Example

Agrega un z-index a tu elemento border-radius, y enmascarará las cosas dentro de él.

Opacidad: 0.99; on wrapper resuelve el error de webkit

Parece que éste funciona:

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

Http://jsfiddle.net/qWdf6/82 /

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

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

Compatible con las últimas chrome, opera y safari, puede hacer esto:

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

Definitivamente deberías echar un vistazo a la herramienta http://bennettfeely.com/clippy/!

Cambie la opacidad del elemento padre 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 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Basado en la excelente respuesta de Graycrow...

Aquí hay un ejemplo del mundo más real 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 sustituye por

-webkit-mask-image:#fff;

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

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

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

En el elemento wrapper hizo el trabajo.

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

Aquí mira cómo lo hice; Jsfiddle

Con el Código que puse, me las arreglé para que funcione en Webkit (Chrome/Safari) y Firefox. No se si funciona con la última versión de Opera. Sí funciona bajo 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;
}

Si está buscando crear una máscara para una imagen y posicionar la imagen dentro del contenedor, no establezca el atributo 'position: absolute'. Todo lo que tienes que hacer es cambiar el margen izquierdo y el margen derecho. Chrome / Opera se adherirá a las reglas overflow: hidden y border-radius.

// 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;
        }
    }