Export (0) Print
Expand All
Expand Minimize

Borders and Shading Dialog Box

The Borders and Shading dialog box lets you define cascading style sheet (CSS) style attributes that determine the borders and background for an HTML element. You can apply these attributes either directly to HTML elements or add them to CSS style rules.

You can access the Borders and Shading dialog box by the following method:

  • In Design view, select Borders and Shading from the Format menu.

If the page element does not have any CSS rules applied to it, a style rule is created as an inline style. If a CSS style rule does exist for the page element, the new style information is written to the existing style rule.

NoteNote:

Inline style rules override style rules that are in a style element on the page or style rules that are in an external CSS file.

Setting

Sets the border edge to be formatted. Select Default, Box, or Custom. Box creates a border around the whole rectangular area that surrounds an element. Custom lets you use the buttons in the Preview panel to select a border side and a style.

Style

Sets the style of the specified border. Select solid, dotted, dashed, double, groove, ridge, inset, outset, or none. For example, if you select top as the selected edge and solid as the style, the following style rule is added:

border-top-style:solid;

Preview

Sets which sides of the rectangular area that surrounds an element are borders. The graphic shows the borders that are currently set.

Width

Sets the width of the specified border. You can enter a number and a unit value such as px (default), pt, pc, mm, cm, in, em, ex, or %. For example, if you select top as the selected edge and Solid as the style, and you type 50px in the Width field, the following style rule is added:

border-top:50px solid;

Color

Sets the color for the selected border in the style. Select a color from the list or click More Colors for additional choices.

Padding

Sets the distance between the border and the element that it is associated with. You can enter a number and a unit value such as px (default), pt, pc, mm, cm, in, em, ex, or %. For example, if you type 10px in the Left field, the following style rule is added:

padding-left:10px;

Fill

Sets the background and foreground colors for the selected page element. You can select Standard or Document (colors that you have used in the Web project), or click More Colors for additional choices. For example, if you set background color to blue and foreground color to gray, the following style rule is added:

background-color:blue; color:gray;

Preview

Shows the color, background color, or background picture applied.

Patterns

Sets the background picture for the page element. You can specify the following:

  • An image to use as the background.

  • The vertical and horizontal position of an image.

  • Whether the image is repeated.

  • Whether the image is fixed or scrolls with the page element.

For example, if you set the background picture to Soap Bubbles.bmp, its position to "0px" and "0px", and the foreground color to white, the following style rule is added:

background:url('Soap%20Bubbles.bmp') 0px 0px; color:white;

Community Additions

ADD
Show:
© 2014 Microsoft