HTML and CSS Reference
In-Depth Information
cuts a 10-pixel-wide border slice from the
frame.png
image file. The four sides are
stretched to cover the length of the four sides of the object. Note that you do not include
the px measurement unit when indicating the size of the slice. Slices can be expressed
only in pixels or as a percent of the width and height of the border image. You can set
different size slices for each of the four sides. For instance, the style
border-image: url(frame.png) 5 10 15 25 stretch;
slices the border image 5 pixels on the top side, 10 pixels on the right, 15 pixels on the
bottom, and 25 pixels on the left side. The slice sizes follow the same syntax used with
all border widths. Thus, the style
border-image: url(frame.png) 5% 10% stretch;
slices the border image 5% of the image's height on the top and bottom sides, and 10%
of the image's width on the left and right sides.
The
repeat
parameter value controls how browsers use the border image to fill in the
sides of the object and has the following values:
To apply a border
image to an object, you
must also set the width
of the object's border
using the
border
or
border-width
property.
•
stretch
:
The border slices are stretched to fill the border.
•
repeat
:
The border slices are tiled to fill the border.
•
round
:
The border slices are tiled to fill the border; if they don't fill the border
with an integer number of tiles, the image is rescaled until they do.
•
space
:
The border slices are tiled to fill the border; if they don't fill the area with
an integer number of tiles, extra space is distributed around the tiles.
You can apply different repeat values to different sides of the border. For example, the style
border-image: url(frame.png) 10 stretch repeat;
stretches the border slices on the top and bottom, but tiles the border slices on the left
and right.
Adding a Border Image
• To use a graphic image as an element border, apply the style
border-image: url(
url
)
slice repeat
;
where
url
is the source of the border image file,
slice
is the size of the slice cut
from the border image file, and
repeat
indicates whether the border slices should be
stretched to cover the object's four sides or tiled.
The torn paper image that Kevin wants to use as a border image has been saved in the
borderimg.png
file. You'll use the
border-image
style now to add this border around
the main photo in Kevin's Web page. Kevin suggests that you tile the border image
sides using the
repeat
keyword. Opera, Firefox, Chrome, and Safari all support border
images as browser extensions; however, at the time of this writing, no version of Internet
Explorer does.
