The border-image property lets you use an image to draw an element’s border instead of (or in addition to) the conventional color-based border. Conceptually the source graphic is divided into regions - corners and edge strips - and those regions are used to paint the corresponding parts of the box’s border. This allows designers to create decorative frames, skinned UI components, or complex edge treatments that scale to different box sizes while preserving corner detail and edge patterns.

The image is cut into nine logical areas (four corners, four edges, and the center). The corner pieces are typically preserved to keep their shape; the edge strips are then stretched, tiled, or otherwise adapted to span the side lengths between corners. Because the image replaces the visual border, it works together with the element’s existing border properties: the element must have a visible border style for the image to be rendered, and the border’s widths determine how much space the image occupies along each side. For reference to the standard border mechanics, see border and border-style.

Beyond edges and corners, the source image also has a central region that may be used to fill the area inside the border or left out entirely depending on how the image is intended to behave. The way the image is scaled and positioned interacts with the element’s background painting - the border-image sits around the content and will visually combine with any background artwork - so you should consider how the frame image and the element’s background will layer together. See background for how background content relates to box painting. Rounded corners on the element will also affect how the image is clipped and rendered, so plan corner artwork with the box’s corner radii in mind; for details on corner shaping see border-radius.

In practical use, designers create images specifically for this technique (often called nine-slice or scalable frames) so that corners remain crisp while edges scale or repeat naturally. Use suitably high-resolution artwork if the border must scale up, and test how the image behaves at different box sizes to avoid unwanted distortion. For debugging and fallbacks, keep a simple solid border style available so the component still looks acceptable if the image fails to load or the border-image behavior is not desired in certain contexts.