CSS Border Properties

Putting a box around things with CSS is really simple. You can put a box around any HTML element simply by adding a border to it. For example, this code:

<p style="width: 420px; 
     padding: 17px; 
     border: solid #999966 1px; 
     text-align: justify; 
     font-size: 14px;">

...will create a paragraph that looks like this. It's 420 pixels wide and there is 17 pixels of padding between the box outline (border) and the contents of the paragraph. The border is solid, and you can see the color of it.

There are two other things I did to get it like that. First, I centered the paragraph on page using a division tag:

<div align="center"> ... </div>

The other thing I did, because the division tag would center the text within the box, is to add the text alignment to the paragraph style code. By setting it to justify it makes a nice, neat looking box of text.

Although a </p> tag isn't required in HTML, it's a good idea to use it when you stylize a paragraph like that. It can prevent lower quality browsers from carrying the style over to the next paragraph.

What Now?

In the heading above, I added a border to the bottom only, and made it dotted and red. CSS is pretty cool, it allows you to do many things HTML can't do by itself. Here's the code for that heading:

<h3 style="border-bottom: dotted red 2px;">What Now?</h3>

Pretty simple, but pretty neat.

And now, here is a picture of my little grandson sitting on my knee. Notice I've got the winter beard for warmth. Hey, it's not there to make me just another pretty face, it has a purpose!

The frame around the picture isn't part of the graphic, that's more CSS code. Here's how I did that:

<img src="images/ethan.jpg" width="160" height="120" 
             style="border: ridge #A29A80 12px;">

The second line is the CSS code. Cools beans, eh Mr. Greenjeans? Cute kid, too, huh? ...and of course, I'm not the least bit prejudiced about it! Well, that's enough boxing for now, I don't want you should get cauliflower ears from the boxing lesson I just gave you.

Refer to the CSS Reference Chart for more border options.

Web Design

Site Information

More Boogie Jack Sites

CSS Border Properties

What Now?