Visually generate CSS border-image with gradients and colors.
The box below uses border-image. Adjust parameters to see the effect.
The border-image shorthand lets you use images or gradients to create custom element borders. It includes:
border-image-source β URL or gradient for the borderborder-image-slice β How to slice the border imageborder-image-width β The width of the border imageborder-image-outset β How far the border extendsborder-image-repeat β stretch, repeat, or roundThe most common use of border-image is creating gradient borders. Use linear-gradient() as the source with proper slice values for smooth gradient borders.