Border-Image

Specify an image as the border around a div element:

      border-image: ImageSource Slice Width Outset Repeat;

border-image is a shorthand property for setting all the following CSS3 properties

border-image-source  Use an image as a border.           url('...') or none
border-image-slice   Inward offsets of the image-border. number | % | fill;
border-image-width   Width of the image-border.          number | % | auto;
border-image-outset  Extend the image beyond the border. number
border-image-repeat  Repeat, round or stretch the image. stretch | repeat | round;

Default: none 100% 100% stretch

The border-style property must be set for the border-image properties to have any effect. If the size of the image is not the same as the combined size of the borders (plus the element itself) then it will either be stretched or tiled & repeated according to the image-repeat property.

In practice the image would be a custom prepared graphic with decorative edges - a notebook style, torn paper or some other repeatable styling that is more complex than a simple coloured border.

Examples:
h1 { border-image: url('../images/grad.png') 100% auto ; }
.emw3class { border-image: thick; }
#emw3id { border-image: 2em; }

Try it:

Sample flag.png image:

Browser Support: (CSS3) Firefox, Safari, Chrome, IE11.
None of the major web browsers support the individual (non-shortcut) properties.

“Growing up, I never imagined a girl from a border town could one day become a governor” ~ Susana Martinez

Related:

Border-image - MDN Web Docs.
border-color - Color of the four borders.