November 2011
Intermediate to advanced
384 pages
13h 23m
English
You can create custom borders around elements with the help of image templates and CSS3’s new border-image property. Web browsers that support this feature dynamically map your template image to correctly stretch and shrink its edges to match the selected object, but leave the corners intact:
border-image: source slice repeat; border-width: width;
The source value should be in the form of url(imagefile) to load the border template image. The slice value can be one to four numbers or percentages, representing the inward offsets from the source image, dividing it into nine segments: four corners, four edges, and a middle block.
When sized correctly, border-image attempts to use exactly one segment for each ...
Read now
Unlock full access