Не стандарный бордер для блока

const span = document.querySelector('.card .circle'); 
const bgPos = () => { 
  let rect = span.getBoundingClientRect(); 
  span.style.backgroundPosition = `-${rect.left}px -${rect.top}px`; 
}; 
bgPos(); 
window.addEventListener('resize', bgPos);

body { 
  background: url(https://is.gd/nyZgUK) 0 0; 
} 
 
.card { 
  position: relative; 
  width: 80vw; 
  height: 50vw; 
  background: #81502c; 
  overflow: visible; 
  margin: 20px; 
  background: -webkit-linear-gradient(left, #81502c 0%, #f4e0a4 50%, #81502c 100%); 
  background: linear-gradient(to right, #81502c 0%, #f4e0a4 50%, #81502c 100%); 
} 
 
.card::before { 
  content: ''; 
  position: absolute; 
  top: -10px; 
  right: -10px; 
  bottom: -10px; 
  left: -10px; 
  border-width: 5px; 
  border-style: solid; 
  border-image: -webkit-linear-gradient(to right, #81502c 0%, #f4e0a4 50%, #81502c 100%) 1; 
  border-image: linear-gradient(to right, #81502c 0%, #f4e0a4 50%, #81502c 100%) 1; 
} 
 
.card .circle, 
.card .circle span, 
.card .circle::before, 
.card .circle span::after { 
  position: absolute; 
  border-radius: 50%; 
} 
 
.card .circle::before, 
.card .circle span::after { 
  content: ''; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
  background: inherit; 
} 
 
.card .circle { 
  left: 50%; 
  bottom: -6vw; 
  width: 12vw; 
  height: 12vw; 
  padding: 1vw; 
  -webkit-transform: translateX(-50%); 
  transform: translateX(-50%); 
  background: url(https://is.gd/nyZgUK); 
  box-sizing: border-box; 
} 
 
.card .circle span { 
  width: 10vw; 
  height: 10vw; 
  background: -webkit-linear-gradient(left, #81502c -20%, #f4e0a4 50%, #81502c 120%); 
  background: linear-gradient(to right, #81502c -20%, #f4e0a4 50%, #81502c 120%); 
} 
 
.card .circle::before { 
  width: 8vw; 
  height: 8vw; 
  z-index: 1; 
} 
 
.card .circle span::after { 
  width: 6vw; 
  height: 6vw; 
  z-index: 2; 
}

<div class="card"> 
  <span class="circle bg"> 
    <span></span> 
  </span> 
</div>

<div style="width: 300px; margin: 30px auto;"> 
  <svg xmlns="http://www.w3.org/2000/svg"  
       xmlns:xlink="http://www.w3.org/1999/xlink"  
       viewBox="-4 -4 648 580"> 
    <defs> 
      <mask id="cp"> 
        <rect width="100%" height="100%" fill="#fff"/> 
        <circle cx="325" cy="480" r="70" /> 
      </mask> 
      <linearGradient id="lg"> 
        <stop stop-color="#C28F45" offset="0"/> 
        <stop stop-color="#fff" offset="50%" stop-opacity="1" /> 
        <stop stop-color="#C28F45" offset="100%"/> 
      </linearGradient> 
    </defs> 
    <g> 
    <rect x="20" y="20" width="600" height="440" fill="url(#lg)" mask="url(#cp)"/> 
    <path d="M250,480 0,480 0,0 640,0 640,480 400,480 "fill="none" stroke="#C28F45" stroke-width="8"/> 
    <circle cx="325" cy="480" r="60" fill="none" stroke="#C28F45" stroke-width="6" stroke-linejoin="round"/> 
      <circle cx="325" cy="480" r="45" fill="#C28F45"/> 
    </g> 
  </svg> 
</div>

body { 
	background: url('http://www.mariacenoura.pt/ptpictures/f/13/139206_lenovo-wallpaper.jpg'); 
} 
.div { 
  text-align: center; 
  border: 10px solid hsla(0,0%,100%,.5); 
  background: linear-gradient(to left, #f39c12, #ADF2F7); 
/* решение фон не растягивается под рамку  */ 
  background-clip: padding-box; 
  /* стили */ 
	max-width: 15em; 
	padding: 2em; 
	margin: 2em auto 0; 
	font: 30px/1.5 Arial; 
  font-weight: bold; 
  text-transform: uppercase; 
  position: relative; 
  padding-bottom: 60px; 
  z-index: -2; 
   
} 
 
.div:after { 
    content: ''; 
    position: absolute; 
    border: 3px solid transparent; 
    width: 110%; 
    height: 120%; 
    top: -25px; 
    left: -30px; 
border-image: linear-gradient(to top, transparent 0%, #ADF2F7 100%); 
border-image-slice: 1; 
   
} 
 
.circle { 
  width: 30px; 
  height: 30px; 
  background-color: #f39c12; 
  border-radius: 50%; 
  position: relative; 
  margin: 0 auto; 
  border: 5px solid hsla(0,0%,0%,.8); 
  background-clip: padding-box; 
  bottom: -100px; 
   
} 
.bg { 
  width: 40px; 
  height: 40px; 
    border-radius: 50%; 
  background-color: orange; 
  border: 10px solid transparent; 
  border-image-slice: 1; 
  position: relative; 
  z-index: -1; 
  left: -15px; 
   
  top: -15px; 
   
} 
.circle:after { 
  content: ''; 
  height: 2px; 
  width: 250px; 
  display: block; 
  bottom: 50%; 
  left: 50%; 
 transform: translateY(50%); 
   transform: translateX(25%); 
  position: absolute; 
  background: linear-gradient(to top, #f39c12, #ADF2F7); 
} 
.circle:before { 
  content: ''; 
  height: 2px; 
  width: 250px; 
  display: block; 
  bottom: 50%; 
  right: 50%; 
 transform: translateY(-50%); 
   transform: translateX(-25%); 
  position: absolute; 
  background: linear-gradient(to bottom, #f39c12, #ADF2F7); 
}

<div class="div">Пора повторить <br> мои коронные ПА. 
  <div class="circle"><div class="bg"></div></div> 
</div>