Borders and Shading Dialog Box

  • Article

 

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.

Note

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.

UIElement List

Borders tab

  • 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;

Shading tab

  • 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;

See Also

How to: Set Web Server Control Color Properties