Div with transparent gap inside border

border, css, css-shapes, transparency

Solution

You make a gap between the background colour and border with :

- one element.

- a transparent border to make the transparent gap between the box-shadow and the background.

- `background-clip:padding-box;` to clip the background inside the transparent border (otherwise the background colour would overflow and appear through the transparent border, more info here).

- a `box-shadow` with spread-radius for the outer line.

div {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 0, 0, .7);
  border: 10px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 4px #fff;  
}

/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}

<div></div>

Problem

I've got a div of varying size that needs to have a transparent area followed by a white border as seen in this screenshot: I have no problem getting the red transparency and shape correct, but am at a loss on how to get the transparent area followed by the white border. How can I do this?

Original source