Border-изображение с закругленными углами

Question

У меня есть DIV, который использует линейный градиент как границы образа, чтобы придать ему некоторый градиент границы

<div class = "gradborders" id="mydiv" runat="server"> 
..various elements... 
</div> 
.... 
.... 
.gradborders{ 
border-image: -webkit-linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch; 
border-image: -o-linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch; 
border-image: -moz-linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch; 
border-image: linear-gradient(45deg, rgba(20,20,20,0.7) 5%, rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;} 

и я хочу, углы закруглены. Я попробовал стандартный способ, добавив это в gradborders:

border-radius: 8px; 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 

но не кости. Я даже попытался использовать расширитель AJAX Rounded Corner на div, который, я уверен, сработал бы, но это тоже не сработало. Есть идеи??

Answer 1

Возможно, что-то вроде этого JSFiddle будет делать:

<div class="container"> 
    <div class="gradborders">hi</div> 
</div> 

и

.container{border-radius: 10px;overflow:hidden;} 
.gradborders{ 
-webkit-border-image: url("http://photos-f.ak.fbcdn.net/hphotos-ak-ash4/1686_520555094669668_1347475803_n.jpg") 8;}