HTML and CSS Reference
In-Depth Information
The first cutline is across the top and defines the height of the top-left and top-right
corners; the second cutline defines the width of the top-right and bottom-right corners; the
third cutline defines the height of the bottom corners; and the fourth cutline defines the
width of the left corners, top and bottom. For example, given
url(
background-image
) 50px 20px 100px 30px
you would set cuts like this:
50px
100px
30px
20px
A / allows for the specification of image widths for each of the borders from top, right,
bottom, and left. Widths are generally in length units, such as pixels. Finally, three
keywords as defined above as
imagehandling
can be placed to control whether the middle
zones of the cutlines are to be stretched (
stretch
), repeated (
repeat
), or shown to the
nearest whole image (
round
). For example, given this image
the differences between a repeatable as opposed to a stretched border image should be clear:
Example
<div style="-moz-border-image: url(starborder.png) 50px 50px 50px 50px
stretch stretch;
-webkit-border-image: url(starborder.png) 50px 50px 50px 50px
stretch stretch;
