Radio de borde de inserción con CSS3

¿Hay alguna forma de crear un radio de borde insertado con css3? (Sin imágenes)

Necesito un radio de frontera como este:

Radio de borde incrustado

La mejor manera que he encontrado para lograr esto con todos los CSS y HTML (sin imágenes, etc.) es mediante el uso de degradados CSS3 , por Lea Verou. De su solución:

div.round { background: -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); background: -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); background: -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); background-position: bottom left, bottom right, top right, top left; -moz-background-size: 50% 50%; -webkit-background-size: 50% 50%; background-size: 50% 50%; background-repeat: no-repeat; } 

El resultado neto es un conjunto de degradados transparentes con curvas. Consulte el JSFiddle completo para obtener una demostración y jugar con la apariencia que tiene.

Obviamente, esto depende del soporte para rgba y gradient , y en consecuencia debe tratarse como una mejora progresiva, o si es esencial para el diseño, debe proporcionar un respaldo basado en imágenes para navegadores antiguos (especialmente IE, que no admite gradient incluso hasta IE9).

Puede lograr esto colocando elementos de círculo transparente en las esquinas con sombras de caja. Utilicé una combinación de divs desbordados ocultos que contenían tramos, sombras de recuadros, bordes y pseudo selectores.

Mira mi ejemplo .

Este es el HTML y CSS básico que necesita para comenzar:

 a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;} a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;} a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;} a div:first-of-type {left: -14px;} a div:first-of-type:after {left:0;} a div:last-of-type {right: -14px;} a div:last-of-type:after {right:0;} a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;} a div:first-of-type span {left:-20px;} a div:first-of-type span:first-child {top:-20px;} a div:first-of-type span:last-child {bottom:-20px;} a div:last-of-type span {right:-20px;} a div:last-of-type span:first-child {top:-20px;} a div:last-of-type span:last-child {bottom:-20px;} 
  

No creo que sea posible si las esquinas tienen que ser transparentes, sin embargo, si se conoce el fondo, puede crear un div en cada esquina con un borde redondeado. Si esos divs reciben el mismo color de fondo que el fondo de la página, el efecto funcionará.

Vea mi ejemplo aquí http://jsfiddle.net/TdDtX/

 #box { position: relative; margin: 30px; width: 200px; height: 100px; background: #ccc; border: 1px solid #333; } .corner { position: absolute; height: 10px; width: 10px; border: 1px solid #333; background-color: #fff; } .top-left { top: -1px; left: -1px; border-radius: 0 0 100% 0; border-width: 0 1px 1px 0; } .top-right { top: -1px; left: 190px; border-radius: 0 0 0 100%; border-width: 0 0 1px 1px; } .bottom-left { top: 90px; left: -1px; border-radius: 0 100% 0 0; border-width: 1px 1px 0 0; } .bottom-right { top: 90px; left: 190px; border-radius: 100% 0 0 0; border-width: 1px 0 0 1px; } 
 

Puede lograr este efecto con las nuevas imágenes css3-Border (bueno, son imágenes, pero se amplían sin problemas). Pero esto es bastante nuevo y aún no es muy compatible (bueno en todos los navegadores decentes (con prefijos) excepto IE, para ser precisos;)).

Un buen artículo sobre imágenes de frontera en csstricks .

Soporte del navegador

No parece que eso sea posible. Probé un radio de borde con un valor negativo solo para ver qué pasaría pero no tuvo ningún efecto.

Editar:

Incluso si divide la caja en partes más pequeñas, en algún momento aún tendrá que crear una esquina insertada transparente. La transparencia es la parte difícil que puede evitar que esto sea posible sin imágenes. Básicamente, tendrías que poder renderizar un círculo transparente con un bg circundante no transparente (y si eso es posible en CSS, me gustaría saber cómo 🙂

Si no necesita transparencia, hay formas de hacerlo.

 body { background: #fff; } .div{ position:relative; } .box { background: #f7f7f7; height: 178px; width: 409px; margin: 25px; /*padding: 20px;*/ position: relative; overflow: hidden; border: 1px solid #ccc; border-left: 0px; } .box:before { content: ""; display: block; background: #fff; position: absolute; top: -33px; left: -263px; width: 300px; height: 242px; border-radius: 300px; border: 1px solid #ccc; } 
 

Hmm, podrías hacer uso de este pequeño truco aquí para crear Radio de borde interior

Entonces, para respaldar la transparencia, probablemente debería agregar otros bloques en el medio. Más o menos como la forma en que solían hacerse las viejas imágenes redondeadas; tener un lapso para cada esquina con la imagen transparente. Y se extiende a los lados y arriba para llenar el espacio vacío. En lugar de usar imágenes, puedes usar este truco para hacerlo en CSS.

 body { background: #fff; } .div{ position:relative; } .box { background: #f7f7f7; height: 178px; width: 409px; margin: 25px; /*padding: 20px;*/ position: relative; overflow: hidden; border: 1px solid #ccc; border-left: 0px; } .box:before { content: ""; display: block; background: #fff; position: absolute; top: -33px; left: -263px; width: 300px; height: 242px; border-radius: 300px; border: 1px solid #ccc; }