Div with transparent gap inside border

Question

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?

Answer 1

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>

Answer 2

Radial gradients can be used too:

#test {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 120px center, 
      rgba(255, 0, 0, .5) 100px,
      rgba(255, 0, 0, 0) 100px,
      rgba(255, 255, 255, 0) 105px,
      rgba(255, 255, 255, .5) 105px,
      rgba(255, 255, 255, .5) 110px,
      rgba(255, 255, 255, 0) 110px
    ),
    url(http://lorempixel.com/output/nature-q-c-1280-960-5.jpg) center/cover;
}

<div id="test"></div>

Radial gradients have added advantage. For example you can draw ellipses instead of circles, add more borders and create more sophisticated patterns.