• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > border-image Set of Properties

12.15. border-image Set of Properties

The CSS3 border module will enable future Web authors to create borders out of images using the extensive set of border-image properties. There are in fact three sets of border-image properties: one used to specify the image or images to be used, another describing how they should fit together, and a third that allows you to do simple flipping and rotating of a given border image, conserving the total number of border images that need to be used to create a border. This section looks at the first of those sets of properties, which is used to place images to frame the sides and corners of a border.

For setting images for borders, there are two separate sets of border image properties governed by the separate border-image and border-corner-image shortcut properties. Both of these shortcut properties incorporate the values of four separate sub-properties controlling the four edges and four corners. For border-image there are the border-top-image, border-right-image, border-bottom-image and border-left-image sub-properties; for border-corner-image there are the border-top-left-image, border-top-right-image, border-bottom-right-image and border-bottom-left-image sub-properties. Each of these sub-properties can be set to a series of up to three URL values, each pointing to a border image file. If a single image is specified, only it is used for the border. If two are set, then the first is placed to the top or left side, the second to the bottom or right. If three are used, the first image is set to the middle, the second to the top or left and the third to the bottom or right. In practice though, it is more likely that you will be using a single image, if only for simplicity's sake. In addition to these values, you can also set these sub-properties to none (the default) and to inherit, which will take on any parent value that may be present. All of the border-corner properties have an additional value, called continue, which when set to 0 (the default) allows the border side image(s) to run fully into the corner. When a corner value is set, it essentially covers its corner, and hopefully is aligned so that it forms a continuous border with its side image border elements (assuming that they are used at all).


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint