You can also create borders for elements using CSS, setting the border style, border width, border color , and so on. Here are the border properties that are available: -
border-bottom-width Sets the width of the bottom of the border. Set this to an absolute measurement, such as 10px for 10 pixels, or 4pt for 4 points; or use a keyword, as in thin , medium , or thick . -
border-color Specifies the color you want the border to be displayed in (use a predefined color or a color triplet ). Setting this property to one value sets the color of the whole border; two values set the top and bottom borders to the first value and the right and left borders to the second; four values set the color of all border parts in order: top, right, bottom, and left. -
border-left-width Sets the width of the left edge of the border; set to an absolute measurement like 10px for 10 pixels, or 4pt for four points, or a keyword: thin , medium , or thick . -
border-right-width Sets the width of the right edge of the border. Set this to an absolute measurement, such as 10px for 10 pixels, or 4pt for 4 points; or use a keyword, as in thin , medium , or thick . -
border-style Sets the border style. Possible values include dotted , dashed , solid , double , groove , ridge , inset , and outset . -
border-top-width Sets the width of the top of the border. Set this to an absolute measurement, such as 10px for 10 pixels, or 4pt for 4 points; or use a keyword, as in thin , medium , or thick . You also can use five shorthand border properties: -
border-top Sets the style of the top border -
border-right Sets the style of the right border -
border-bottom Sets the style of the bottom border -
border-left Sets the style of the left border -
border Sets the border style all at once You set the shorthand properties to a width, style, and color all at once like this: P {border 10pt solid cyan} Here's an example. In this case, I'm adding a border to the <SECTION> element in our XML document: Listing ch09_17.css TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic; border-style: solid} P {display:block} You can view the results in Figure 9-11, where you can see the solid border around the <SECTION> element. (I might note in passing that it's a good thing we selected a solid border for this element because Internet Explorer cannot draw anything but solid borders around elements presently.) Figure 9-11. Enclosing an element in a border. |