Raio de borda de inserção com CSS3

Existe uma maneira de criar um raio de borda com css3? (Sem imagens)

Eu preciso de um raio de borda como este:

Raio de borda de inserção

A melhor maneira que encontrei para conseguir isso com todos os CSS e HTML (sem imagens, etc.) é usando gradientes CSS3 , por Lea Verou. De sua solução:

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

O resultado líquido é um conjunto de gradientes transparentes com curvas. Veja o JSFiddle completo para uma demonstração e para brincar com a aparência dele.

Obviamente, isso depende do suporte para rgba e gradient e, portanto, deve ser tratado como um aprimoramento progressivo ou, se for essencial para o design, você deve fornecer um fallback baseado em imagem para navegadores mais antigos (especialmente o IE, que não suporta gradient através do IE9).

Você pode conseguir isso posicionando elementos circulares transparentes nos cantos com sombras de checkbox. Usei uma combinação de divs sobrecarregados ocultos contendo spans, sombras de checkbox, bordas e pseudo seletores.

Confira meu exemplo .

Este é o HTML básico e o CSS que você precisa para começar:

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

Eu não acho que seria possível se os cantos tivessem que ser transparentes, no entanto, se o fundo for conhecido, você pode criar um div em cada canto com uma borda arredondada. Se esses divs receberem a mesma cor de fundo que o plano de fundo da página, o efeito funcionará.

Veja meu exemplo aqui 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; } 
 

Você pode conseguir esse efeito com as novas imagens de borda css3 (bem, são imagens, mas são dimensionadas sem problemas). Mas isso é muito novo e não muito amplamente suportado ainda (bem em todos os navegadores decentes (com prefixos), exceto o IE para ser preciso;)).

Um bom artigo sobre imagens de bordas em csstricks .

Suporte de Navegador

Não parece que isso é possível. Eu tentei um raio de borda com um valor negativo apenas para ver o que aconteceria, mas não teve efeito.

Editar:

Mesmo se você dividir a checkbox em partes menores, em algum momento você ainda teria que criar um canto de inserção transparente. A transparência é a parte complicada que pode impedir que isso seja possível sem imagens. Basicamente, você teria que ser capaz de renderizar um círculo transparente com um bg não transparente ao redor (e se isso for possível no CSS, eu adoraria saber como 🙂

Se você não precisa de transparência, existem maneiras de fazer isso.

 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, você poderia fazer uso deste pequeno truque aqui para criar o raio de borda de inserção

Então, para dar suporte à transparência, você provavelmente teria que adicionar outros blocos entre eles. Mais ou menos como as imagens antigas e arredondadas costumavam ser feitas; tendo um intervalo para cada canto com a imagem transparente. E se espalha nas laterais e no topo para preencher o espaço vazio. Em vez de usar imagens, você poderia usar esse truque para fazer isso em 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; }