Applying border image to objects in Dreamweaver CS5.5

Using the border-image property in CSS, you can use a single image to generate a border for a box object.

Out of the five properties specified by the W3C for border-image, Dreamweaver supports the following three:

  • Image Source : Location of the image.
  • Image slice:  Treating the image as sliced into 9 sections.
  • Repeat-x and Repeat-y: 
    • Repeat – Repeats/tiles the image across the edge
    • Stretch – Stretches the image across the edge
    • Round – Tiles the image so that only a whole number of images fit. If a whole number cannot be accommodated, the image is stretched

The border-image property has the following format (webkit – supported by Dreamweaver Live View):

-webkit-border-image: url[border image-source] [border image –slice] [border image-repeat]

Example: -webkit-border-image: url(border-image.png) 50 50 50 50 repeat round;

Note that the pixels are specified without px being suffixed. For percentage, you must add the suffix “%” to the values.

The border-image property has the following format (Mozilla support):

-moz-border-image: url[border image-source] [border image –slice] [border image-repeat]

Example: -moz-border-image: url(border-image.png) 50 50 50 50 repeat round;

  1. In the CSS Styles panel, click Add Property.
  2. Select border-image from the menu.
  3. Click the “+” icon.
  4. Specify the source of the image.
  5. Specify the image slice values.
  6. Specify how the image has to be added to the edges using the Repeat-x and Repeat-y values.

Comments are closed.