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

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

12.16. border-fit Set of Properties

While the border-image set of properties are designed to let you place which image where on a given border or corner, they do not tell the browser how they should interact with each other. That's where the border-fit set of properties comes in.

There are in fact three sets of border-fit properties: those governing length, those governing width and another set that deal exclusively with corner images (the border-corner-fit properties). Including shortcut properties, there are a whopping 20 separate properties in the border-fit set of properties. But for the most part they use the same seven values: clip, overflow, overwrite, repeat, scale, space and stretch. The clip value tells the browser to display the image — without repeating it — and remove (i.e., “clip”) any overflow. The overflow value does the same thing as clip, except that the image is allowed to overflow the border area if necessary. The overwrite value displays the image without any scaling, and any overflow isn't clipped. The repeat value is used to tile a given image many times over until it fills its space, with any overflow clipped. scale is similar to repeat, but when the border space is filled prior to an overflow, all of the images are scaled up in size in order to fit. With space, the image is repeated as often as possible to fill up a given border area without overflowing, and then space is added between them for a perfect fit. Finally, stretch is used so that a single image is expanded or contracted enough to fill the border space. The default value for all of the border-fit properties is repeat, and for the border-corner-fit properties it is overwrite, so corner images take precedence over “side” images, which are repeated as necessary to fill the border space. In addition to these values one should not forget the ubiquitous inherit value, which would take on any available parent value for the border side or corner. And while it is not explicitly stated in the latest draft of the CSS3 border specification, it would make sense if the CSS3 initial value is applicable to these properties. initial is a way of explicitly setting a given property to its default value: for the border-fit properties it is repeat, and it is overwrite for the border-corner-fit properties.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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