Border-image-slice

Short form:

	border-image : url(../images/deco/images-pour-border/groovy.png) 124 round;

Corresponds to the properties:

	border-image: url(../images/deco/images-pour-border/groovy.png);
   	border-image-slice: 124; /* = 124 124 124 124 */
   	border-image-repeat: round;
Note: only the short form works in current (April 2012) user agents, and only with vendor prefixes (experimental).

Steps: what are the slices ?

  1. The User agent cuts the image in 4 rows of 124px (called slices)
    Slices
  2. The UA places those slices within the border-width space. In this example, the border-width is 124px so the slices are places without being re-dimensioned.
    Be careful, don't forget to give a border-width, it won't work without!
    Morbi feugiat iaculis nisi ut dictum. Curabitur hendrerit, magna ac aliquam vehicula, erat lorem imperdiet justo, ut vehicula justo sapien in purus. Donec tincidunt nibh ut massa mollis rhoncus placerat massa sagittis. Donec tempor lacinia metus sit amet pretium. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis.
  3. In this example, the border-width is 2em, and the slices are rescaled. In other words, the 124px of each slice are compressed into 2em thickness.
    Morbi feugiat iaculis nisi ut dictum. Curabitur hendrerit, magna ac aliquam vehicula, erat lorem imperdiet justo, ut vehicula justo sapien in purus. Donec tincidunt nibh ut massa mollis rhoncus placerat massa sagittis. Donec tempor lacinia metus sit amet pretium. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis.

Result without arrows:

border:solid 2em beige;
border-image: url(../images/groovy.png) 124 round;
  

The 'round' value will repeat the portion of the image between the slices, adjusting the size slightly if necessary to avoid cut off slices.

Morbi feugiat iaculis nisi ut dictum. Curabitur hendrerit, magna ac aliquam vehicula, erat lorem imperdiet justo, ut vehicula justo sapien in purus. Donec tincidunt nibh ut massa mollis rhoncus placerat massa sagittis. Donec tempor lacinia metus sit amet pretium. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis.

Different widths of slices

With 'stretch'

border-width: 118px 65px 152px 75px;
border-image: url(../images/Balloon_Border.png) 
  118 65 152 75 stretch;

The stretch value will repeat the portion of the image between the slices.

Note 1: Possible values for border-image-repeat:

Note 2: the property 'border-image-width:auto' (applies to the image) ought to avoid defining the border-widths. But it's not implemented today.

Morbi feugiat iaculis nisi ut dictum. Curabitur hendrerit, magna ac aliquam vehicula, erat lorem imperdiet justo, ut vehicula justo sapien in purus. Donec tincidunt nibh ut massa mollis rhoncus placerat massa sagittis. Donec tempor lacinia metus sit amet pretium. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis.

With 'round'

border:solid 33px beige;
border-image: url(../images/lu_petit_ecolier_cadre.png) 
35 33 36 39  round stretch;

Morbi feugiat iaculis nisi ut dictum. Curabitur hendrerit, magna ac aliquam vehicula, erat lorem imperdiet justo, ut vehicula justo sapien in purus. Donec tincidunt nibh ut massa mollis rhoncus placerat massa sagittis. Donec tempor lacinia metus sit amet pretium. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis.

Morbi feugiat iaculis nisi ut dictum. Curabitur hendrerit, magna ac aliquam vehicula, erat lorem imperdiet justo, ut vehicula justo sapien in purus. Donec tincidunt nibh ut massa mollis rhoncus placerat massa sagittis. Donec tempor lacinia metus sit amet pretium. Aliquam gravida, erat eget porttitor venenatis, tellus purus tincidunt magna, et vehicula metus justo sit amet magna. Curabitur lorem nulla, tincidunt suscipit consectetur ut, molestie at felis.