CSS Border style values
There are many ways to make borders look differently with CSS, altough the use of border-style most commonly seem to be limited to border-style: solid. It can often be beneficial to use the capabilities within CSS instead of creating a graphic, gif, jpg or png.
Imagine being able to change the border or frame of all illustrations on your site with some keystrokes. Going from a 1px solid black line to a 4px dotted or 3d looking frame can give your images a brand new feel and look.
Give me feedback on this page/code
CSS Border Styles
These examples are the CSS border-styles given by the CSS2 recommendation and should work in all modern browsers. The exact effect the style is supposed to give is included in the example.
<div style="border-style: solid; ">
The border is a single line segment.<div style="border-style: dashed; ">
The border is a series of short line segments.<div style="border-style: dotted; ">
The border is a series of dots.<div style="border-style: double; ">
The border is two solid lines.<div style="border-style: groove; ">
The border looks as though it were carved into the canvas.<div style="border-style: inset; ">
The border makes the entire box look as though it were embedded in the canvas.<div style="border-style: none; ">
No border. This value forces the computed value of 'border-width' to be '0'.<div style="border-style: outset; ">
The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.<div style="border-style: ridge; ">
The opposite of 'groove': the border looks as though it were coming out of the canvas.
The future CSS3 border styles
CSS3 is still a working draft, but there are 3 additions in border styles that should be noticed. Your browser probably will not support these yet, so read the comment on each for a description.
<div style="border-style: dot-dash;">
Alternating dots and dashes.<div style="border-style: dot-dot-dash;">
Two dots and a dash.<div style="border-style: wave;">
A wavy line.