Define the custom border regions
border-image-slice
Cut the source image for custom borders into nine pieces: four corners, four edges, and one fill area.
Property values
This property expects five values, but they don't all have to be provided explicitly. The first four values specify edge offsets. These are used to establish lines that slice the image into nine regions. The fifth value specifies whether or not to retain and use the interior region of the source image as a background color.
The edge offsets may be specified as percentages or as values without units, in which case they will be interpreted as pixels (for raster images) or relative coordinates (for vector images). Edge offsets are used according to these rules:
| property value | alogrithm | regions created |
|---|---|---|
| top line | A horizontal line is drawn through the image at the specified distance from its top | top-left corner top edge top-right corner |
| right line | A vertical line is drawn through the image at the specified distance from its right edge | top-right corner right edge bottom-right corner |
| bottom line | A horizontal line is drawn through the image at the specified distance from its bottom | bottom-left corner bottom edge bottom-right corner |
| left line | A vertical line is drawn through the image at the specified distance from its left edge | top-left corner left edge bottom-left corner |
| 'fill' | When present this keyword specifies that the interior region is to be used as the target element's background color | interior region |
The four edge offsets may each be specified explictly or using these shorthand rules:
| number of values | sides effected |
|---|---|
| 1 value | Sets all four lines: top line, right line, bottom line, left line |
| 2 values | 1st value: top and bottom lines 2nd value: right and left lines |
| 3 values | 1st value: top line 2nd value: right and left lines 3rd value: bottom line |
| 4 values | 1st value: top line 2nd value: right line 3rd value: bottom line 4th value: left line |
Examples
/* slicing the image into 9 regions and keeping the interior as a background */
border-image-slice: 10 10 10 10 fill;
/* Using shortcut notation for the same thing */
border-image-slice: 10 fill;