Warning: Undefined array key "StartingPoint" in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 107 Warning: Cannot modify header information - headers already sent by (output started at /customers/f/f/0/safaribears.de/httpd.www/content.php:107) in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 115 Warning: Undefined variable $WEB_ROOT in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 118 Warning: Cannot modify header information - headers already sent by (output started at /customers/f/f/0/safaribears.de/httpd.www/content.php:107) in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 118 Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 169 CSS Tutorial - Borders - border

Borders are very important. A lot more than one would think, as they are not only just borders around the four edges of images (which was usually the one and only use for them in non-CSS HTML). What can we do with borders?

sample imageborder:solid black 2px
How exciting, our old normal border around an image. But what do those values mean? solid, black, 2px?
Let's start backwards. 2px is an easy one, we have met that length unit before. In border, we can give the thickness, in the standard units, px for pixel or em for font size, and also in these three values (which I never use): thin, medium, thick.
The second parameter is obvious, it's the color for the border. Also here we can do the usual color unit scheme already met with 'color' and 'background-color': The 16 named colors, or the RGB value.
The first parameter ('solid') talks about the looks of the border, there's not just the plain one, there are more:

sample image

border:dotted blue 4px

sample image

border:groove black 8px

sample image

border:ridge black 8px

sample image

border:dashed red 4px

sample image

border:outset black 8px

sample image

border:double #FF00FF 4px

sample image

border:inset black 8px

(IE users will - as usual - not see everything. Go download a real browser! Opera or Mozilla!!!)

That's pretty interesting isn't it? But there's more to border than just that.