CSS

SHARE

CSS and Borders

Written By

Joe Burns

Jan 4, 2005

Use these to jump around or read it all…

[The Border Commands]

[Setting the Border Commands]

[The Border Style Commands]

How about a border? Want one? With Style Sheet commands you can get just about as border-loopy as you’d like. Before CSS, borders were basically limited to those things that actually had a border to begin with: tables, frames, and Russian break-away republics….

Now you can set borders to just about any HTML element. Most likely you will be surrounding blocks of text and images. Past that, everything else seems kind of silly. A border around an HR line? Why? I can’t imagine, but I know someone will do it. So, here we go.

The Border Commands

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

Border-Width
Border-Color
Border-Style

Width. Color. Style. That’s about all you can change. But the nice 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:

Here’s a small block of text.

It is here to allow a border to go around it.

Blah, blah, blah. Yadda, yadda, yadda.

</P>

…and this is what you get:

Here’s a small block of text.
It is here to allow a border to go around it.
Blah, blah, blah. Yadda, yadda, yadda.

See that? I set the “border-style” to “double”. I set the “border-color” to “#FF00FF” (please note the leading pound sign: #). Finally, I set the “border-width” to 10 pixels.

The browser knows what I mean simply 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 so:

Setting the Border Commands

I have these Style Sheet commands embedded right into the element I wish to affect. I’m using the STYLE=”–” format to do it.

Of course, if you’d like, you can put these into the <HEAD> section of your page in a style block. It’ll look something like this:

<STYLE>

P {border-style: ridge}

</STYLE>

Now every P tag on the page will get that border. If you’d like to set the same effect to multiple items, then follow this format:

<STYLE>

P, IMG {border-style: ridge}

</STYLE>

Now all paragraphs and images will get that same border effect.

The Border Style Commands

I don’t feel like I have to go into the “border-color” or the “border-width” command too much. Just remember that when you use the border-color, use hex codes with leading pound signs. Yes, you can also use text color codes. No pound sign is required.

In terms of the “border-width” command, stay with pixels denoted by px, or use the “thin,” “medium,” or “thick” attributes. I set the color to #FF00FF so you could see the borders. They look like this:

border-width: thin

border-width: medium

border-width: thick

Now let’s have some fun. There are eight different border styles available through Style Sheets: dashed (supported by MAC version browsers), dotted (supported by MAC version browsers), double, groove, inset, outset, ridge, and solid. Here’s a quick look at each with the color set to #FF00FF and the border set to 10px:

border: dashed #FF00FF 10px

border: dotted #FF00FF 10px

border: double #FF00FF 10px

border: groove #FF00FF 10px

border: inset #FF00FF 10px

border: outset #FF00FF 10px

border: ridge #FF00FF 10px

border: solid #FF00FF 10px

That’s That

Pretty neat, huh? Now go and make borders. Just try not to go nuts! If everything on the page is bordered, what’s the point? Use these mainly as accent pieces.

Enjoy!