Borders

So for this tutorial you should know the basics of HTML and some CSS. But you most likely will be able to figure it out even if you are a beginner.

Borders can be awesome, a lot more awesome than above.
So this is your code:
border: solid #fff 5px
You can do solid, dashed, dotted, double, groove, ridge, inset or outset for the style of border. Here is an example of them all.
#fff of course specifies the color
5px tells how wide the border should be

When you use a border you can put a background-color property in whatever block element you used with the border (the div, span, or whatever).

Now border gives you all four sides but you can specify border-bottom, border-left, border-right, border-top.

You don’t have to use all sides you can just specify one side which gives you only one side.

You could make a shadow. You need to match the colors right but…

oooh, do you see that? The text is too close to the edge. Padding is needed. Add padding to the block element (the div, span, or whatever).

A new feature for borders in HTML is rounding them. This works in Mozilla, Chrome and soon to come Internet Explorer 8. So if you are using Internet Explorer 7 and below you won’t see the rounded border.

The code for this is
border-radius: 1px;
you can use any number of pixels you want to specify the radius.
Mozilla has its own code for rounded borders so make sure you include its code too.
-moz-border-radius: 1px;

This is an example with a border radius of 5:

This is an example with a border radius of 15:

One more example of the use of borders. You can use it in a blockquote. Blockquotes are frequently used to point out ‘terms of use’ or special instructions.