Yo, come get your borders!

Under the current CSS (css2), these are listed at W3C's CSS2 Box model as the available borders to choose from, not including hidden and none, which is rather useless for me to display here as I think you can get the picture *L*:

• dotted -The border is a series of dots.
• dashed -The border is a series of short line segments.
• solid -The border is a single line segment.
• double -The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
• groove -The border looks as though it were carved into the canvas.
• ridge -The opposite of 'groove': the border looks as though it were coming out of the canvas.
• inset -The border makes the entire box look as though it were embedded in the canvas.
• outset -The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.

Causing your objects to appear with any of these particular borders can be done by any of the following styles:

• A) listing individually a border-style: value
  .div {border-width: 8px; border-style: dotted; border-color: #000033; }
  


• B) listing individually in order to assign a variance to the values.
  .div {border-width: 8px 8px 8px 8px; border-style: solid dotted solid dotted; border-color: #000033; }
  


• C) grouping the values together to form a shorthand border format.
  .div {border: 8px dotted #000033; }

Examples of all the border styles listed at top:

dotted


dashed


solid


double


groove


ridge


inset


outset

Now the dream of borders to come ... CSS3 is being developed right now, and it includes some interesting plans for borders. Images specifically for bordering and some new styles/values to shape your borders in plain color too. The complete list of border-style attributes to come according to the W3C's Working draft for CSS3 backgrounds and borders module:

none hidden dotted dashed solid double dot-dash dot-dot-dash wave groove ridge inset outset

If you click on the link above, you can see a screenshot of what they will look like. I really want to play with wave myself, sounds like it can make some neat looks all on it's own!