带有实心边框的 CSS 插入边框半径

Question

I know that I could create inset/inverted borders playing with radial-gradient, like here: Inset border-radius with CSS3 , but what I want to know is if I can draw a solid border of 1px around the resulting shape, like in this image:

I don't only want the bottom-left radius inverted by also a border, and the background color inside the remaining space must be transparent. Is it possible with CSS3 and HTML (I am not interested in canvas or SVG for now)?

Answer 1

the demo: Jsfiddle here

Code

 figure { position: relative; width: 200px; height: 120px; margin: 100px auto; overflow: hidden; border: 1px solid black; border-right: none; border-bottom: none; border-bottom-left-radius: 5px; border-top-left-radius: 5px; } figure:before, figure:after { content: ''; position: absolute; } figure:before { right: -50%; top: 0; background: transparent; width: 172px; height: 200px; border: 1px solid black; border-radius: 100%; box-shadow: 0 0 0 100em red; } figure:after { left: -1px; bottom: 0px; height: 16px; width: 128px; border-top-left-radius: 0; border-bottom-left-radius: 5px; border-left: 1px solid black; border-bottom: 1px solid black; }

 <figure></figure>

Answer 2

In my experience, while it's very feasible and worthwhile to use CSS to create some complex shapes ( http://css-tricks.com/examples/ShapesOfCSS/ ), once you require a border, it's time to give up this method and use images. You can certainly use a clone of the shape z-indexed below it, two pixels wider, two pixels taller, one pixel above it, one pixel to the left, and in the desired border color. Unfortunately, there will always be minor cross browser issues, especially with rounding. It will never really look quite right.