@mixin border-image($images) { -webkit-border-image: _border-add-prefix($images, webkit); -moz-border-image: _border-add-prefix($images, moz); -o-border-image: _border-add-prefix($images, o); border-image: _border-add-prefix($images); } @function _border-add-prefix($images, $vendor: false) { $border-image: null; $images-type: type-of(nth($images, 1)); $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) // If input is a gradient @if $images-type == string { @if ($first-var == "linear") or ($first-var == "radial") { $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) $gradient-pos: nth($images, 2); // Get gradient position $gradient-args: nth($images, 3); // Get actual gradient (red, blue) $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); } // If input is a URL @else { $border-image: $images; } } // If input is gradient or url + additional args @else if $images-type == list { $type: type-of(nth($images, 1)); // Get type of variable - List or String // If variable is a list - Gradient @if $type == list { $gradient: nth($images, 1); $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) $gradient-pos: nth($gradient, 2); // Get gradient position $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); @for $i from 2 through length($images) { $border-image: append($border-image, nth($images, $i)); } } } @return $border-image; } //Examples: // @include border-image(url("image.png")); // @include border-image(url("image.png") 20 stretch); // @include border-image(linear-gradient(45deg, orange, yellow)); // @include border-image(linear-gradient(45deg, orange, yellow) stretch); // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); // @include border-image(radial-gradient(top, cover, orange, yellow, orange));