Formatting Borders
Written by Jen

Personally, I find borders the best feature of CSS. Below is an example of the borders that you can get with HTML:

But that's essentially the only type of border you can get. Sure, you can make it thicker and another color, but it has to be the same for all 4 sides, and it can only be a straight line. Boring isn't it? Now here is just one of the effects you can create when you edit borders using CSS:

.

Now that's what I call spiffy. Below are all the possible border styles you could choose:

div {border-style: solid;}
div {border-style: double;}
div {border-style: groove;}
div {border-style: dotted;}
div {border-style: dashed;}
div {border-style: inset;}
div {border-style: outset;}
div {border-style: ridge;}

And this is how they will show up when you make a div blog:

This is a solid border

This is a double border

This is a groove border

This is a dotted border

This is a dashed border

This is an inset border

This is an outset border

This is a ridge border

Along with styles you can also choose your border width. This is how thick you want to make your border. You can make it as many pixels as you like, although it would be silly to make it something like 10000px thick.

.

To do this, use the border-width attribute:

div {border-width: 1px;} and replace 1 with any number you like.

And, of course, don't forget the colors! You may use hex color codes or pre-set color names (like red, green etc.).

div {border-color: #000000;}

All together, this would look something like:

div {border-style: solid; border-width: 2px; border-color: #000000;}

Now what is this effect where you can split the borders on all 4 sides and make them look different? This may require a lot of CSS so be prepared:

div {border-top-style: solid; border-top-width: 2px; border-top-color: #000000; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #000000; border-left-style: solid; border-left-width: 2px; border-left-color: #000000; border-right-style: solid; border-right-width: 2px; border-right-color: #000000;}

And then just change all the attributes to whatever you want. This would give you something that looks like the second example at the top of this page.

Do remember that it isn't necessarily just for the div element, it can be used for other things like classes, IDs, text, tables or even stuff like links. Just replace div with any other element you intend to add borders to.