Crear un degradado de borde para cada una de las 4 fronteras

Quiero crear el mismo degradado lineal para cada borde.

El degradado de borde con 5 colores comienza desde

transparent to white to black to white to transparent 

De esa manera tengo esquinas transparentes.

¿Cómo puedo hacer esto para las 4 fronteras?

¿Es posible asignar un gradiente lineal a un borde?

enter image description here

Sidenote: debería ejecutarse sin demasiado esfuerzo en IE9 + else IE10 +: P

¿Qué hay de usar un gradiente radial? Aunque esto es solo una maqueta, puedes ver el efecto básico.

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

También puede hacer esto con múltiples degradados lineales como fondos y colocarlos según sea necesario, como en el siguiente fragmento.

Para cambiar el tamaño / ancho del borde, modifique el valor de 20px en el background-size . (Nota: Dependiendo de la salida deseada, puede que tenga que cambiar los porcentajes de gradiente lineal también cuando cambie el tamaño. Pero eso debería ser razonablemente sencillo de hacer).

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

Los gradientes en general no tienen soporte en IE 9 pero deberían funcionar en IE 10+. La imagen de borde, por otro lado, solo funciona desde IE 11 hacia arriba.

 .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; } 
 
Some Test Content