Uncle Jim's CSS-P Tutorials: Setting the Border Attributes

Article four of a series by Jim Stiles.

Setting Border Properties:

Text Borders

The below example is a demonstration for setting outlining borders for text using style sheet attributes.

Pass your mouse over this text to reveal the border

This is accomplished using the following style:
.over{border:2px dotted red;width:320px;height:20px}
.out{border:0px;width:320px;height:23px;padding-left:2px;padding-top:2px}

Table Borders

The below example is a demonstration for setting outlining borders for tables using style sheet attributes.

Here, I set the table borders using a background image. Creating an effect like the following is done simply by nesting one div inside another.

#border{
background-image:url(IMAGE.gif);
padding:8px;
width:296px;
height:200px;
}

#content{
width:100%;
height:100%;
background-color: #fff8dc;
}

<DIV id="border">

<DIV id="content">

</DIV>

</DIV>
  I. The parent div is given the following:
    • A background using the border image
    • Top and bottom padding the height of the image, left and right padding the width of the image
    • Width and height
II. The nested div is given:
    • Background color
    • Width and Height of 100%


III. Additional Notes:

In order to get an even border, you need to ensure the dimensions are correct for the size of the image used. The width of the border div must divide equally with the image width and the height of the border div must divide equally with the image height. Therefore if the image width is 10 pixels then the border width must be in multiples of 10.

Example:
Image width = 8, border width = 290
290 / 8 = 36.25 , must result in a whole number, therefore,
37 * 8 = 296 , change the width to 296
or
36 * 8 = 288 , change the width to 288

You can use the following Javascript to determine if any adjustments are needed:
Click here to check if adjustments are needed.


Next, I will go over some compatability issues and how to fix them.

<<< Previous | HOME | Next >>>