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: hidden; ">
Same as 'none', except in terms of border conflict resolution for table elements
<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.