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:

corner
top edge
top-right corner
corner
right edge
bottom-right corner
corner
bottom edge
bottom-right corner
corner
left edge
bottom-left corner
property value alogrithm regions created
top line A horizontal line is drawn through the image at the specified distance from its top
right line A vertical line is drawn through the image at the specified distance from its right edge
bottom line A horizontal line is drawn through the image at the specified distance from its bottom
left line A vertical line is drawn through the image at the specified distance from its left edge
'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;
border-image-slice

style > framing > border-image-sliceDefine the custom border regions

🔎