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.

Examples:
h1 { border-image: url('../images/grad.png') 100% auto ; }
.ss64class { border-image: thick; }

#SS64id { border-image: 2em; }

Try it:

This is a sample of text with a CSS border image. The size of the border and the size of the border image will determine how the result appears on screen.

Sample flag.png image:
Flag sample image

Browser Support: (CSS3) Firefox and Chrome. None of the major web browsers support any of the individual (non-shortcut) properties.
for Opera use the vendor prefix -o-border-image
for Safari use the vendor prefix-webkit-border-image

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

Related:

border-color - Color of the four borders.


© Copyright SS64.com 1999-2014
Some rights reserved