CSS Border Images
In this page:
selector {
border-image: source slice / width / outset repeat;
}The border-image Shorthand
border-image is a shorthand that combines a source image, how it's sliced, its rendered width, and how the sliced pieces are repeated or stretched along the edges, replacing a plain solid/dashed border with a graphic one.
- Accepted values:
- border-image-source — url() or a gradient
- border-image-slice — number or percentage, optionally with fill
- border-image-width — length, number, or auto
- border-image-outset — length or number
- border-image-repeat — stretch | repeat | round | space
Example: The border-image Shorthand
<style>
.box {
border: 20px solid transparent;
border-image: linear-gradient(45deg, red, blue) 20;
}
</style>
<div class="box">Graphic border instead of solid or dashed</div>border-image-source
border-image-source specifies the image to use, which can be a raster image URL or even a CSS gradient -- gradients are a common lightweight alternative to an actual image file for simple decorative borders.
- Accepted values:
- url("...") — an image file
- linear-gradient() — a gradient used as the border
- radial-gradient() — a radial gradient border
- none — no border image (initial value)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-image-source
<style>
.box {
border: 20px solid transparent;
border-image-source: linear-gradient(90deg, orange, purple);
border-image-slice: 20;
}
</style>
<div class="box">Gradient used as the border source</div>border-image-slice
border-image-slice divides the source image into a 3x3 grid using four inward offsets (top, right, bottom, left), producing four corner pieces (never stretched), four edge pieces (stretched or repeated along one axis), and a center piece (used only if the fill keyword is added).
- Accepted values:
- number — pixels (or SVG units) cut from each edge, e.g. 30
- percentage — relative to the image size
- fill — also keeps the middle slice
- one to four values — top, right, bottom, left order
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-image-slice
<style>
.box {
border: 20px solid transparent;
border-image-source: url('https://placehold.co/60x60');
border-image-slice: 20 20 20 20;
}
</style>
<div class="box">Image sliced into a 3x3 grid</div>border-image-width and Outset
border-image-width controls the rendered thickness of the border-image independently of the underlying border-width, and border-image-outset lets the image extend beyond the element's normal border box for decorative overhang effects.
- Accepted values:
- number — multiple of border-width (border-image-width)
- length — e.g. 20px
- percentage — relative to the border image area
- auto — the slice's intrinsic size
- border-image-outset — extends the image beyond the border box (number or length)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-image-width and Outset
<style>
.box {
border: 10px solid transparent;
border-image-source: url('https://placehold.co/60x60');
border-image-slice: 20;
border-image-width: 15px;
border-image-outset: 5px;
}
</style>
<div class="box">Rendered thickness and overhang set independently</div>border-image-repeat: stretch vs round vs repeat
The repeat keyword controls how the edge pieces fill the space between corners: stretch scales them (may distort), repeat tiles them (may clip at the boundary), and round tiles them while scaling slightly so a whole number of copies fits without clipping.
- Accepted values:
- stretch — slices are stretched to fit (initial value)
- repeat — slices are tiled and may be clipped
- round — slices are tiled and scaled to fit whole
- space — slices are tiled with even gaps
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: border-image-repeat: stretch vs round vs repeat
<style>
.box {
border: 20px solid transparent;
border-image-source: url('https://placehold.co/60x60');
border-image-slice: 20;
}
.stretch { border-image-repeat: stretch; }
.round { border-image-repeat: round; }
.repeat { border-image-repeat: repeat; }
</style>
<div class="box stretch">stretch</div>
<div class="box round">round</div>
<div class="box repeat">repeat</div>- Setting
border-imagewithout a border width or style, so nothing appears. - Using pixel units in
border-image-slice, when it uses unitless numbers (or percentages) for image pixels. - Using an image that is too small to slice correctly.
- Margins and padding control space outside and inside an element, and margins can collapse.
- Height and width set element size, and the box model explains how these parts combine.
- Rounded corners and border images decorate the box.
Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: