SOURCE

<div class="example">
  
</div>

body{
  background: rgba(255,0,0,0.4)
}
.example{
  width: 200px;
  height: 200px;
  background-image: 
    radial-gradient(
      circle at 50% 50%,transparent 0,transparent 30px, 
      rgba(0,255,0) 30px,
      rgba(0,255,0) 31px,
      rgba(0,0,255, 0.4) 32px,
      rgba(0,0,255, 0.4) 32px, 
      rgba(0,0,255, 0.4) 50px
    );
  background-size: 100% 100%;
  background-position: 100px 100px;
  position: relative;
}
.example:after,
.example:before{
  content: '';
  display:block;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.example:after{
  width: 140px;
  height: 200px;
  border-top: solid 1px rgba(0,255,0);
  border-bottom: solid 1px rgba(0,255,0);
}
.example:before{
  width: 200px;
  height: 140px;
  border-left: solid 1px rgba(0,255,0);
  border-right: solid 1px rgba(0,255,0);
}