HTML and CSS Reference
In-Depth Information
Element borders are created by using one or more of the border properties
to set values for the width, color, and style of the border. he
border-width
property can take any nonnegative numeric value or one of the keywords
thin
,
medium
,
thick
, or
inherit
, with medium as the default value. he permissible
values for the
border-style
property are
none
,
hidden
,
solid
,
dotted
,
dashed
,
double
,
ridge
,
groove
,
inset
,
outset
, and
inherit
. he default for all HTML
elements is a border with a style of none. herefore, an element must have its
border-style
property set to some other value for a border to appear. Older
browsers may not support all values. Example 3.14 illustrates the use of a table
to display the diferent border style values. Figure 3.14 shows how this code
appears in a typical browser.
Example 3.14: Using a table to display border styles
<!DOCTYPE html>
<html>
<head>
<title>Example 3.14</title>
<style type="text/css">
body { font: bold 9pt Tahoma,Verdana,sans-serif; }
td { border-width: 5px; padding: 1em; background-color: #ddd; }
td:before { content: attr(style); } /* insert style content */
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="8">
<tr>
<td style="border-style: none"></td>
<td style="border-style: hidden"></td>
<td style="border-style: solid"></td>
<td style="border-style: dotted"></td>
<td style="border-style: dashed"></td>
</tr>
<tr>
<td style="border-style: double"></td>
<td style="border-style: ridge"></td>
<td style="border-style: groove"></td>
continues
