.top-to-bottom {
border-width: 3px;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}
.bottom-to-top {
border-width: 3px;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}
.left-to-right {
border-width: 3px 0 3px 3px;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%;
}
.right-to-left {
border-width: 3px 3px 3px 0;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%;
}