<div class="container">
  <div class="wrapper">
    <div class="border border_outer">
      <div class="border__pseudo border__pseudo_outer"></div>
      
      <div class="border border_middle">
        <div class="border__pseudo border__pseudo_middle"></div>
        
        <div class="border border_inner">
          <div class="border__pseudo border__pseudo_inner"></div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  background-color: #334;
}

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.wrapper {
  display: flex;
  width: 80%;
  height: 200px;
}

.border {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  
  padding: 6px;
  position: relative;
  
  overflow: hidden;
  
  &::before, &::after {
    content: '';
    display: block;
    position: absolute;  
    top: 0;
    left: 0;
    background-color: #334;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  
  &::after {
    top: 0;
    right: 0;
    left: initial;
    transform: translate(50%, -50%);
  }
  
  &_outer {
    padding: 8px;
    box-shadow: inset 0 0 0 8px rgb(176, 147, 17);
    
    &::before, &::after {     
      width: 50px;
      height: 50px;
      z-index: 2;
      box-shadow: inset 0 0 0 8px rgb(176, 147, 17);
    }
  }
  
  &_middle {
    box-shadow: inset 0 0 0 6px #fff;
    border-color: #fff;
    
    &::before, &::after {
      width: 56px;
      height: 56px;
      z-index: 1;
      box-shadow: inset 0 0 0 6px #fff;
      transform: translate(-60%, -60%);
    }
    
    &::after {
      transform: translate(60%, -60%);
    }
  }
  
  &_inner {
    box-shadow: inset 0 0 0 6px rgb(130, 38, 49);
    
    &::before, &::after {
      width: 62px;
      height: 62px;
      box-shadow: inset 0 0 0 6px rgb(130, 38, 49);
      transform: translate(-65%, -65%);
    }
    
    &::after {
      transform: translate(65%, -65%);
    }
  }
  
  &__pseudo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    &::before, &::after {
      content: '';
      display: block;
      position: absolute;  
      bottom: 0;
      left: 0;
      background-color: #334;
      border-radius: 50%;

      transform: translate(-50%, 50%);
    }
    
    &::after {
      left: initial;
      right: 0;
      transform: translate(50%, 50%);
    }
    
    &_outer {
      @extend .border_outer;
    }

    &_middle {
      @extend .border_middle;
      
      &::before {
        transform: translate(-60%, 60%);
      }
      
      &::after {
        transform: translate(60%, 60%);
      }
      
    }

    &_inner {
      @extend .border_inner;
      
      &::before {
        transform: translate(-65%, 65%);
      }
      
      &::after {
        transform: translate(65%, 65%);
      }
    }
  }
}