XHTML & CSS
Unordered lists

Ridge Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto; margin-right: auto; border-style: ridge"         
cellpadding="2" cellspacing="2">
        <tr>
          <td style="text-align: center; vertical-align: top;">
            border-style: ridge
          </td>
        </tr>
</table>

How it looks in the browser
border-style: ridge

Grove Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: groove"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: groove

Inset Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: inset"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: inset

Outset Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: outset"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: outset

Dashed Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: dashed"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: dashed

Dotted Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: dotted"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: dotted

Solid Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: solid"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: solid

Double Border

<!-- ~~~~~~~~~~~~~  CODE ~~~~~~~~~~~ -->

<table style="width: 200px; text-align: left; margin-left: auto;
   margin-right: auto; border-style: double"
   cellpadding="2" cellspacing="2">
    <tr>
        <td style="text-align: center; vertical-align: top;">
           border-style: groove
        </td>
     </tr>
</table>

How it looks in the browser
border-style: double
Author - Alan Dunbar
Creative Commons Licence
Valid XHTML 1.0