Create a border gradient for each of the 4 borders

Question

I want to create the same linear gradient for each border.

The border gradient with 5 colors starts from

transparent to white to black to white to transparent

That way I have transparent corners.

How can I do this for all 4 borders?

Is it possible to assign a linear-gradient to a border?

Sidenote: It should run without too much effort on IE9+ else IE10+ :P

Answer 1

How about using a radial gradient? Although this is just a mock up, you can see the basic effect.

.outer {
  vertical-align:top;
  display:inline-block;
  height: 100px;
  width: 100px;
  position: relative;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.inner {
  height: 90%;
  width: 90%;
  position: absolute;
  left: 5%;
  top: 5%;
  background: white;
}

<div class="outer">
  <div class="inner">
    text
  </div>
</div>
<div class="outer" style="height:100px; width:200px">
  <div class="inner">
    text
  </div>
</div>

---

Resources

---

• 1 * gradient generator

---

Note

---

• Not suitable for projects for <=IE9

Answer 2

You could also do this with multiple linear-gradients as backgrounds and position them as required like in the below snippet.

To change the size/width of the border, modify the 20px value in the background-size. (Note: Depending on the desired output, you may have to change the linear-gradient percentages also when you change the size. But that should be reasonably straight-forward to do.)

background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;

Gradients on the whole have no support in IE 9 but should work in IE 10+. Border-image on the other hand works only from IE 11 upwards.

.border-image {
  height: 200px;
  width: 200px;
  background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
  background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
  background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
  background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
  padding: 20px;
}

<div class="border-image">Some Test Content</div>