Borde insertado-radio con CSS3

Puede lograr esto colocando absolutamente elementos circulares transparentes en las esquinas con sombras de caja. Utilicé una combinación de divs desbordados ocultos que contenían luces, sombras de caja, bordes y pseudo selectores.

Mira mi ejemplo.

Este es el HTML básico y CSS 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;}

<a href="">
    <div>
        <span></span>
        <span></span>
    </div>

    <div>
        <span></span>
        <span></span>
    </div>
</a>

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

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

<div id="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

Podría lograr este efecto con el nuevo css3-Border-images (bueno, son imágenes, pero se escala sin problemas). Pero esto es bastante nuevo y no muy ampliamente soportado todavía (bien en todos los navegadores decentes (con prefijos) excepto IE para ser precisos;)).

Un buen artículo sobre imágenes de bordes 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 descompone la caja en partes más pequeñas, en algún momento aún tendría que crear una esquina de inserción transparente. La transparencia es la parte difícil que podría evitar que esto sea posible sin imágenes. Básicamente, tendría que ser capaz de representar un círculo transparente con un bg no transparente circundante (y si eso es posible en CSS, me encantaría saber cómo:)

Si no necesita transparencia, hay maneras 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;
}

<div class="div">
<div class="box"></div>
</div>

</body>
</html>

Ejemplo: http://jsfiddle.net/dVmX3/

Hmm, posiblemente podría hacer uso de este pequeño truco aquí para crear Radio de borde insertado

Entonces, para soportar la transparencia, probablemente tendría que agregar otros bloques en el medio. Más o menos como la forma en que se hacían las viejas imágenes redondeadas; tener un espacio para cada esquina con la imagen transparente. Y se extiende por los lados y la parte superior para llenar el espacio vacío. En lugar de usar imágenes, podría 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;
}

<div class="div">
<div class="box"></div>
</div>

</body>
</html>