Border / Borders -- CSS Guide- Cascading Style Sheets

davesite.com / webstation / css

Cascading Style Sheets: an Interactive Tutorial

Border

part 2

advertisement

advertisement
#1 Web Hosting Plan! Free Software & Tools!
1000GB space, 1000GB bandwidth, just $6.95!

So let's make each paragraph have a medium border that is dotted:
p { border-width: medium; border-style: dotted; }

So close to getting our border perfect. But what if the border to be blue? Simple. It's the border-color property. Just set it to blue:
p { border-width: medium; border-style: dotted; border-color: blue; }

Wouldn't it be nice to have a combination property? There is. It's just border:, and it expects width, style, then color. So the example immediately above could be simplified to:
p { border: medium dotted blue; }

If you want to set each of the four borders individually, you can. The properties are border-top, border-right, border-bottom, and border-left. The values expected are width, style, then color. If you wanted every paragraph with a dotted left border in red, and a dashed right border in purple, you could use:
p { border-left: dotted red; border-right: dashed purple; }

Think you understand margin, padding, and border? Try making a look-a-like to this coupon. Hint: You might want to use a width: or height: property. Guess how they work.
50% OFF
EVERYTHING
expiration date: yesterday

<html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Click here if you get stuck or want to see how I did it.
advertisement

< Ch. 10 part 1 > Chapter 11

Chapter Selection

Introduction
Basics of CSS
All About Selectors
Background and Color
Fonts and Text
Links
Lists
Margin
Padding
Border
Good CSS Design
Resources

[ jump to top ]

Learn about the #1 Ranked Web Host. 100 GB Space.
Up to 7 Web Sites. Free Domain & Setup. Click Here.