CSS Border Properties

With Style Sheet border commands you can get just about as border-crazy as you'd like. Before CSS, borders were basically limited to those things that actually had a border to begin with: tables and frames.

Now you can set a border around just about any HTML element you want. More than likely you will be surrounding blocks of text and images. Past that, everything else seems kind of silly. Putting a border around an HR line? LOL, Why? I can't imagine, but I know someone will do it. So, here we go.

There are three main border commands you should be concerned with for about a minute:

• border-style
• border-width
• border-color

Width. Color. Style. That's what you can change. But the best thing here is that the width, the color, and the style for a border will never be the same word. That means you won't have to write out each command each time. Just use "border:" and list the attributes. Here's an example using a block of text:

<p style="border: double #FF0000 6px">
  Here's some text to fill up the space.
  I put it here to allow a border to go around it.
  Blah, blah, blah. Yadda, yadda, yadda. Some more
  text to fill up space.
</p>

And this is what you end up with...

Here's some text to fill up the space. I put it here to allow a border to go around it. Blah, blah, blah. Yadda, yadda, yadda. Some more text to fill up space.

See that? I have set the "border-style" to "double". I set the "border-color" to "#FF00FF" (please note the leading hash sign: #). Finally, I set the "border-width" to 10 pixels. The browser knows what I mean because none of the attributes to width, color, or style will ever be the same, so they have to represent those items by default. With me? Of course, if you'd like to write them all out, go ahead. Just separate each with a semicolon and add one at the end. Like below:

Style Sheet...

p.red{
	border-color: #FF0000;
	border-style: double;
	border-width: 6px;
}

In Your Document...

<p class="red">
  Here's some text to fill up the space.
  I put it here to allow a border to go around it.
  Blah, blah, blah. Yadda, yadda, yadda. Some more
  text to fill up space.
</p>

This gives us the same result as above. You'll notice in this example that you can separate the styles from your document into your style sheet and link it to your document with a class.

THE BORDER STYLE COMMANDS
I'm not going to go into the "border-color" or the "border-width" command too much. It's pretty straight forward, just remember that when you use the border-color, use hex codes with leading hash signs. Yes, you can also use text color codes like red, blue. black. No hash sign is required.

Now when it comes to the terms of the "border-width" command, stay with pixels denoted by px, or use the "thin," "medium," or "thick" attributes.

Now let's get down to the border styles. There are eight different border styles available through Style Sheets: dashed, dotted, double, groove, inset, outset, ridge, and solid. Here's a quick peek at each with the color set to #FF0000 and the border set to 6px:

<p style="border:dashed #ff0000 8px;">

<p style="border:dotted #ff0000 8px;">

<p style="border:double #ff0000 8px;">

<p style="border:groove #ff0000 8px;">

<p style="border:inset #ff0000 8px;">

<p style="border:outset #ff0000 8px;">

<p style="border:ridge #ff0000 8px;">

<p style="border:solid #ff0000 8px;">

So there's all your borders. Now you know how you might want to go put some borders around some images on you web pages. Enjoy!!