2

I have a div that uses a linear gradient as a border-image to give it some gradient borders

<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;}

and I want the corners rounded. I tried the standard way by adding this to gradborders:

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

but no dice. I even tried using the AJAX Rounded Corner extender on the div which I was sure would work but that also did not work. Any ideas??

twinPrimesAreEz
  • 125
  • 2
  • 13

1 Answers1

2

Perhaps something like this JSFiddle will do:

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

and

.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;}
Douglas Denhartog
  • 2,036
  • 1
  • 16
  • 23
  • strangely enough that only rounds the top left corner – twinPrimesAreEz Feb 05 '14 at 20:19
  • never mind, this works...I actually had some extra elements in my style that I didn`t need which were preventing it from working (border-width and background-clip: padding-box;). Once I removed those, this worked – twinPrimesAreEz Feb 05 '14 at 20:25
  • Too bad you only used the `-webkit-` prefix and an image that didn’t persist. – dakab Apr 05 '16 at 09:27
  • @dakab: any image will do – Douglas Denhartog May 14 '16 at 23:27
  • @DouglasDenhartog: That's self-evident. The critique targeted your broken Fiddle and its Webkit-specificity (the question looking for a generic answer). – dakab May 15 '16 at 12:47
  • @dakab, feel free to participate in the community by editing fiddles and answers with updates :) – Douglas Denhartog May 16 '16 at 20:49
  • @DouglasDenhartog: [Editing is encouraged for some reasons](http://stackoverflow.com/help/privileges/edit) (“spelling mistakes”, “without changing it”), but not to assume the author’s work and certainly not to interfere with the author’s intention, which in this case obviously did not encompass platform-agnosticism. – dakab May 17 '16 at 05:42