Edges

The properties on this tab set the details for the selected object's edges. Click on the properties in the illustrations for further details.

Figure 1 - The HTML Style Properties > Edges tab

• Margins - an object can have margins around it (outside the object) to provide space between adjacent objects. Click the + icon to open the property so you can access the margin setting fields, then type a value, in pixels, into the appropriate fields. Set all simultaneously, or each individually.
• Padding - an object can have padding around its edges(inside the object) to provide space between the object's borders and it's contents. Click the + icon to open the property so you can access the padding setting fields, then type a value, in pixels, into the appropriate fields.Set all simultaneously, or each individually.
• Borders - you can set borders on an object. For each border (top, bottom, left and right) you can set the color, style and width of the line to be used. Note that you can set each individually, or if all are to be identical you can set all simultaneously.
• Color - if the Border Width property is set to a value greater than 0, then the resulting border line will have the color specified here.
• Style - use the Line Style property to specify the type of line you wish to use for the border; solid, dotted etc.
• Width - The Border Width property sets the thickness of the border line, in pixels. If you do not want the border line to be displayed, set the width to 0 or leave it blank.

Figure 2 - The Borders > All properties expanded

• Border image - define an image to be used instead of the normal line-border for an element.
• Image URL - type in the URL to the image that is to be used.
• Slices - specifies the inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the fill keyword is present.
• Fit... - specify how the image is to be fitted into the border length; repeated, stretched etc.
• Border radius - you can apply rounded corners to the border. You can set the radii for all the corners simultaneously or each corner separately.
• Box shadow - you can apply multiple drop shadows (outer or inner) on box elements.
• Horizontal offset - type in a value in pixels (px) for the shadow horizontal offset. A + value puts the shadow to the right of the box, a - value puts the shadow to the left.
• Vertical offset - type in a value in pixels (px) for the shadow vertical offset. A + value puts the shadow below the box, a - value puts the shadow above.
• Blur - the shadow can have a hard edge, or the edge can be blurred. Only positive values are allowed, and the larger the value, the more the shadow’s edge is blurred. Type in a value in pixels (px).
• Spread - a positive value will cause the shadow shape to expand in all directions, while a negative value will cause the shadow shape to contract.
• Color - select the shadow's color.
• Inset - check if you want the shadow to be drawn inside the element. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.
• Custom - you can specify any number of shadows. Write the requirements separated by commas.