Border
border-image
border-image is a shorthand that cuts an image or gradient into nine pieces and draws them in place of the border lines. The corners go in the four corners, and the edges are stretched or repeated to make a frame.
Syntax<'border-image-source'> …
<'border-image-source'>
|| <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?
|| <'border-image-repeat'>
<'border-image-source'> = none | <image>
<'border-image-slice'> = [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} && fill?
<'border-image-width'> = [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<'border-image-outset'> = [ <length [0,∞]> | <number [0,∞]> ]{1,4}
<'border-image-repeat'> = [ stretch | repeat | round | space ]{1,2}Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
border-imageurl(/border-frame.svg)border-image-source
30border-image-slice
1border-image-widthomitted → initial
0border-image-outsetomitted → initial
roundborder-image-repeat
Code
.box {
border: 28px solid #cbd5e1;
border-image: url(/border-frame.svg) 30 round;
}Controls
border-image-source
border-image-slice
fill
/ border-image-width
/ border-image-outset
border-image-repeat
Same value for both directions
About
Cutting into nine pieces (slice)
border-image-slice sets how far in from the top, right, bottom and left edges of the image to cut. The cuts divide the image into four corners, four edges and a middle. The corners go into the border’s corners and the edges along its sides.
- Numbers are coordinates in the image (pixels for a bitmap, its own coordinates for an SVG). The sample image on this page is 90×90, so
30cuts it into equal thirds.%is relative to the image’s width and height. The initial value is100%. - The middle piece is normally discarded. With
fill, it is drawn inside the element too, over the background. - Two to four values cut each side differently, in the same order as margin (the controls here use one).
Drawing width and overhang (width / outset)
After the slice, a / introduces border-image-width, and another / introduces border-image-outset.
border-image-widthis the width of the band the image is drawn in. Unitless numbers like the initial1are multiples of the border width, andautouses the natural size of the cut piece. The border’s own width (and the layout) doesn’t change.border-image-outsetextends the area the image is drawn in beyond the border. The overhang never causes scrolling and doesn’t receive clicks.- To give an outset without a width, write two slashes, as in
30 / / 12px.
Laying out the edges (repeat)
stretch: stretches a single copy of the edge across the whole side. This is the initial value.repeat: tiles outward from the middle of the side, cutting off the copies at both ends.round: resizes the copies so a whole number of them fit.space: places as many whole copies as fit and shares the leftover space equally before, after and between them.
With two values, the first applies to the top and bottom edges (horizontally) and the second to the left and right edges (vertically).
Watch out
- border-image only replaces how the border is drawn. The border’s width still comes from
border-width. Ifborder-styleisnone, the width becomes 0 and nothing is drawn with the initialborder-image-width(one times the border width). This page sets a 28px border withborder. - The
bordershorthand also resetsborder-image. When you use both, writeborderfirst. border-radiusdoesn’t round the corners of a border image.- Gradients have no natural size, so they are drawn at the size of the area the image is drawn in (the border box, unless there is an outset) and then cut.
linear-gradient(…) 1stretches the gradient’s outer 1px to the border width, making a gradient border.