Нестандартная рамка для img

Это простой пример, показал чтобы логика была понятна... использовал что попалось под руку ))

.main{ 
    width: 460px; 
    height: 600px; 
    position: relative; 
} 
 
 
.wrapper{ 
position:absolute; 
left:0; 
top:0; 
width:100%; 
z-index:9; 
background:url(https://mrpsmythopedia.wikispaces.com/file/view/Beowulf-king-geats.jpg/571579007/Beowulf-king-geats.jpg) no-repeat; 
 
} 
 
 
.box{ 
z-index:99; 
overflow:hidden; 
width: 489px; 
height: 468px; 
position:relative; 
background:url('http://mirgif.com/ramki/ramka-47.gif'); 
}

<div class="main"> 
<div class="wrapper"> 
<div class="box"> 
 
</div> 
</div> 
</div>

Ну самый лучший способ это реализовать не на Эксперементальных стилях Chromium а именно на SVG, это будет примерно так :

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/" 
   xmlns:cc="http://creativecommons.org/ns#" 
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 1000 300" 
   version="1.1" 
   id="svg8"> 
  <defs> 
  <pattern id="img1" patternUnits="userSpaceOnUse" width="380" height="480"> 
    <image xlink:href="http://gamebomb.ru/files/galleries/001/f/f2/170863_w350_h250_f.jpg" x="0" y="-53" width="380" height="480" /> 
  </pattern> 
</defs> 
  <g 
     id="layer1"> 
    <path 
       style="stroke-width:10.00000028;fill:url(#img1);stroke:#00bc00;" 
       d="M 18.142852,202.50594 18.327494,97.864713 109.04177,45.704005 199.57141,98.184522 199.38677,202.82575 108.67249,254.98646 Z" /> 
  </g> 
</svg>

Вот что придумал

<div class="nub"><div class="ub"><img src="http://jd3sljkvzi-flywheel.netdna-ssl.com/wp-content/uploads/2016/04/cloudraider_622.jpg" height="100%"></div></div>
.nub {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to bottom, #999933 0%, #666633 20%, #000000 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ub { 
    position: relative;
    top: 1%;
    left: 1%;
    width: 98%;
    height: 98%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

https://jsfiddle.net/bkj7t1jw/1/

вроде бы все готово =) теперь можно с рамочкой баловаться градиентами =)