Valid Web Designs » css » css border

CSS Border

The CSS Border element allows you to customize the borders around HTML elements. With tables you were limited to placing borders only on the table elements. There are several different CSS Border properties that give us an almost unlimited appearance to borders around a single element or a block of content.

Note: With the possibilities of CSS borders this section of the tutorial will be broken down into two pages.

Border Style Types

There are Nine different CSS border styles. (Eight if you don't count the default CSS border value of hidden.

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

CSS Border Display

The following CSS border style examples use the basic style value listed above.

This is a solid border

This is a double border

This is a grooved border

This is a dotted border

This is a dashed border

This is an inset border

This is an outset border

This is a ridged border

CSS Border Width

{border-width: 5px;}

The CSS border width attribute is used to further define the border style. There are three basic declarations you can use, thin, medium and thick. In addition to these three you can also use px(pixels) to set the width.

This is a solid 5px width border

This is a double 5px width border

This is a grooved 5px width border

This is a dotted 5px width border

This is a dashed 5px width border

This is an inset 5px width border

This is an outset 5px width border

This is a ridged 5px width border

CSS Border Color

{border-color: brown;}

The CSS Border Color attribute allows you to set the border color so that you can have the content with in stand out from the rest of the page or just use it to separate content while blending into the web site color theme.

This is a brown solid 5px width border

This is a brown double 5px width border

This is a brown grooved 5px width border

This is a brown dotted 5px width border

This is a brown dashed 5px width border

This is a brown inset 5px width border

This is a brown outset 5px width border

This is a brown ridged 5px width border

CSS Border Shorthand

CSS to the rescue again. You can shorthand the longer CSS border attributes as discussed above. Start by shortening the attribute down to a simple border:

Then declare the width of the border border:5px declare the style type border:5px solid and lastly declare a color if it is to be different from the default color.
border:5px solid #580000;

Now the fun part of borders is beginning. With the eight CSS border styles, The border width variables and now the colors you can begin to see the possibilities to unlimited CSS border appearances.