The border-image shorthand sets all border-image-* properties in one declaration: source, slice, width (after `/`), outset (after a second `/`), and repeat. Missing values fall back to their longhand initial..box {
border-image: url('frame.png') 30 fill / 20px / 0 round;
}.box {
border-image: linear-gradient(45deg, magenta, cyan) 1 / 6px stretch;
}min:0max:9999step:1units:% | px | em | rem | pt | noneNo border image.fillFrom border-image-slice — also draws the center region.autoFrom border-image-width — use existing slice or border-width.stretchFrom border-image-repeat — stretch (default).repeatFrom border-image-repeat — tile.roundFrom border-image-repeat — tile, rescaled to fit whole tiles.spaceFrom border-image-repeat — tile with even gaps.url()Image by URL.linear-gradient()Linear color gradient.radial-gradient()Radial color gradient.conic-gradient()Conic color gradient.repeating-linear-gradient()Repeating linear gradient.repeating-radial-gradient()Repeating radial gradient.repeating-conic-gradient()Repeating conic gradient.image-set()Selects an image by resolution/format.cross-fade()Cross-fades two images.CSS Borders Module Level 4Working Draft<image> <length-percentage> <number>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
