CSS Borders

p{
 border-top-width:4px;
 border-right-width:6px;
 border-bottom-width:8px;
 border-left-width:10px;
 border-style:solid;
}

By now you probably can figure this one out yourself. The lengths are the same that we used with fonts and text. You may also use the keywords "thin", "medium" and "thick". With this one you have to declare a border-style just like with the border-color.

p{
 border-width:4px 6px 8px;
 border-style:solid dotted;
}

This is a shortcut for the border width. Just like the other border property shortcuts, you can specify one to four values for it.

p{
 border-top:dotted green 10px;
}

This one is a shortcut for a side. Here you can specify all three border properties if you wish or just the style. This is how I created the vertical line between this content column and the ad column to its right. There is also a shortcut for each of the other three sides. You can set any side and all sides with these.

p{
 border:double blue;
}

This last one is a shortcut for setting the border properties for all four sides at once. It's important to note here that you can't set different values for the different sides. All sides will appear the same. You must declare a style property, the other two (color and width) are optional. This is the one that's probably used the most. Remember it as it will come in handy when you get to positioning the elements on the page.

Borders are not an inherited style. Elements nested within an element with a border will not have a border themselves unless you set one. The color of the border can be inherited from its parent element depending on the style of border chosen and the browser displaying it.

Hopefully you understand what's been said here about the side orders and specifying values for them with the different shortcuts. The margins and padding are pretty much the same in this regard.

Support us by supporting our advertisers!



© 2004 Terry Lamrouex