Borders and Shading Dialog Box
Article ID: KB101415
Command: Format > Borders and Shading (also can be accessed from
Style dialog box)
The Borders and Shading dialog box allows you to change the borders and background
colors of elements.
Borders
The Borders tab allows you to apply borders to an element or to change the style
of a border. Using this option, you can apply borders to paragraphs, not just
table cells or tables. The "Padding" allows you to increase the space between
the content and the edge of a border.
Example of Borders:
Click here to see an example of different paragraphs with borders.
<p style="border: dotted 1px #cccccc">This paragraph has a dotted border
surrounding it.</p>
<p style="border: 1px solid #cc66cc; padding: 5pt">This paragraph has a solid
border surrounding it, with extra padding set.</p>
Shading
The Shading tab allows you to set the background color or picture of an element,
and also allows you to set the foreground color (the color of the text). When
using a background picture, you can set the vertical and horizontal position in
relation to that element, and also if you want the background to repeat or not.
Example of shading:
Click here to see an example of shading.
<p style="background: #FFCC66">
This paragraph has shading applied to it. Note that the shading expands to fill
the whole window, even though the text ends here.</p>
<p style="color: #ffffff; background: url('rose.jpg')">This
paragraph has a background image of a rose applied. As you can see the
background repeats horizontally (and would repeat vertically if therewas enough
text to stretch down). The picture ends where the paragraph ends.</p>
<p style="background: url('rose.jpg') no-repeat
top right; padding-right: 150px">This paragraph also has a background image of
the rose, but it is fixed to the right so it does not repeat. This paragraph
also has padding set on the right side so that the text does not overlap the
image</span>. If you resize the browser window, note that the picture's height
varies with the paragraph height, up to the maximum height of the picture.</p>
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1021/kb101415.htm
permalink to this article:
http://www.pixelmill.com/support/kb101415.htm
Back to top