The border-image property
The border-image property specifies
an image for a border, it is a shorthand
property for the
border-image-source,
border-image-slice,
border-image-repeat,
border-image-width
and border-image-outset
properties.
However, the shorthand property was introduced in CSS
before shorthand properties at all and is therefore
supported in more older browsers.
Syntax
selector {
border-image: url(path to image) slice/width/outset repeat;
}
Description
An image we want to use for the border must
be designed in a special way: 4 small
images for the corners and 4 images
for the sides. An example of such an image:
In this case, the central part is left white (since we don't want it to fall into the element background). An example of the image with a filled central part:
The slice value tells the browser which
parts of an image will go to the corners and
which to the sides (and which part will be the
center). 4 parts go to the corners,
4 parts go to the sides and one part
(central) goes to the element background
(optional, the fill keyword).
The image is “cut” into pieces as follows:
for the slice value, from one to four
values are indicated. Let's look at it with
an example. Let the following values be specified:
10 20 30 40 (pixels px are not
specified, this is due to the fact that the
image can be both raster and vector). The values
indicate the following: 10 cut from the top,
20 cut from the right, 30 cut from
the bottom, 40 cut from the left. What part
of the image will fall into the top left corner?
This will be a piece: 10 from the top, 40
from the left. The top right corner will contain
10 from the top, 20 from the right. And
so on.
Most often the image is symmetrical (like the diamonds
above) and we need to cut equal pieces into corners. In
this case, one value is specified, which will set the
same slices on all sides. To cut the orange diamonds,
we'll set slice to 26 (since the orange
diamond is 26px by 26px). Yellow diamonds
will fall on the border lines and the following will
happen to them: they will either stretch across the
entire block or repeat along the border (depending
on the repeat value):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: stretch;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
The border-image property does not allow
you to specify the width of an element's border. The
browser simply stretches the image along the border
with the existing width. Therefore, it must be set
via the border property.
Users of older browsers (or with disabled images) will
see a standard border set in border, so it
makes sense to give it a suitable style and color.
Values
| Value | Description |
|---|---|
| url(Path to image) |
Path to image. For more details, see
border-image-source.
|
| slice |
Tells the browser which parts of the image will
go to the corners and which to the sides
(and which part will be the center).
Possible values: from 1 to 4
numbers | from 1 to 4 percents. The
fill keyword can be separated by spaces
in addition to numbers or percentages. For more
details, see
border-image-slice.
|
| width |
The property controls the width of the visible part
of the border and scales it. If this value is greater
than the border-width, the border image will
go under the content. Possible values:
CSS units | percentage | | number | auto. For
more details, see
border-image-width.
|
| outset |
An interesting property that allows you to move
the border outside the element. Negative values
are not supported. Possible values: CSS
units (except % (?)) | positive number | auto. For
more details, see
border-image-outset.
|
| repeat |
Indicates how to repeat an image on the borders
(not on the corners): tile or stretch.
Possible values: stretch | repeat | round | space.
For more details, see border-image-repeat.
|
Default value: none 100%/1/0 stretch
(url(path to image) slice/width/outset repeat).
Example . border-image-repeat: repeat
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Example . border-image-repeat: stretch
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Example . border-image-repeat: round
Now in the normal state the value is set to
repeat, and on hover - round.
Please note that before hovering, not a
whole number of diamonds are placed in the border,
but after hovering - a whole number. This is
how round works:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26 round;
}
#elem {
border-style: solid;
border-width: 42px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Example . border-image-repeat: two values
The repeat value for width
and stretch for height:
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Example . Matching the image width with the border width
Let's increase border-width on mouse hover,
while leaving the border-image width the
same. Diamonds will stretch across the
entire border:
<div id="elem"></div>
#elem:hover {
border-width: 52px;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Example . border-image-slice
Let's take another image in which different pieces are not equal:
We will indicate which parts of the image
need to be cut off - 25% 30% 10% 20%. It
works like this: 25% - top indent,
30% - right indent, 10% - bottom
indent, 20% - left indent. Essentially,
we cut off the corners with these pieces. The
top left corner will be 25% from the top
of the image, and 20% from the left. The
top right corner will be 25% from the top
of the image, and 30% from the right,
and so on.
Also, if you hover your mouse over a block, the
fill keyword will work, and the central part
of the image will become the background of our block:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
border-style: solid;
border-width: 52px;
border-image: url("image.png") 25% 30% 10% 20% stretch;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
Example
Let's make a gradient border using linear gradient:
<div id="elem"></div>
#elem {
background: green;
border-image: linear-gradient(to bottom, red, blue) 30;
border-width: 30px;
border-style: solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
Example . border-image-width
Set the value of border-image-width to
2 (the border image will become 2 times
larger than the border itself) when hovering the
mouse over the element (26/2 - indicated after
the slash, while 26 is the value of
border-image-slice). Please note that the
border itself has not increased, but the border
image has, since it will go under the text:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/2 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Example . border-image-outset
Let's set the border-image-outset value to
3 when hovering over the element.
(26/1/2 - indicated after the second slash,
while 26 is the value of border-image-slice,
and - 1 is border-image-width):
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/1/3 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
See also
-
the
border-image-sourceproperty
that specifies an image path for a border -
the
border-image-sliceproperty
that specifies an image split for a border -
the
border-image-repeatproperty
that sets an image repetition for a border -
the
border-image-widthproperty
that sets an image width for a border -
the
border-image-outsetproperty
that sets an image outset for a border
