---

BOX PROPERTIES

{border-style: # }

{border-top-style: # }
{border-right-style: # }
{border-bottom-style: # }
{border-left-style: # }
#=none, dotted, dashed, solid, double, groove, ridge, inset, outset

<P STYLE="border-style:#;
border-width:5pt; border-color:red">
Today is fine.<br>
Tommorow will be fine.
</P>

{border-style: dotted }
available only IE on Mac

{border-style: dashed }
available only IE on Mac

{border-style: solid }

{border-style: double }

{border-style: groove }

{border-style: ridge }

{border-style: inset }

{border-style: outset }

#=3d

{border-style: 3d }

{border-width: # }
{border-top-width: # }
{border-right-width: # }
{border-bottom-width: # }
{border-left-width: # }
#=thin, medium, thick, length (px, pt, in, cm, em)

<P STYLE="border-style:solid;
border-width:#">
Today is fine.<br>
Tommorow will be fine.
</P>

{border-width: thin }

{border-width: medium }

{border-width: thick }

{border-color: # }

{border-top-color: # }
{border-right-color: # }
{border-bottom-color: # }
{border-left-color: # }
#=color

<P STYLE="border-style:solid;
border-width:medium;
border-color:skyblue">
Today is fine.<br>
Tommorow will be fine.
</P>

{border: # }

{border-top: # }
{border-right: # }
{border-bottom: # }
{border-left: # }
#=#width #style #color

<P STYLE="border:solid medium skyblue">
Today is fine.<br>
Tommorow will be fine.
</P>

{border-collapse: # }
#=separate, collapse

<table border STYLE="border-collapse:#>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>	
</table>

border-collapse:separate

border-collapse:collapse

{table-layout: # }
#=auto, fixed

<TABLE border WIDTH=200 STYLE="table-layout:auto"><TR>
   <TH>NAME</TH><TD>Network Communication Design</TD>
</TR><TR>
   <TH>URL</TH><TD>http://www.ncdesign.org/</TD>
</TR></TABLE>

table-layout:auto

table-layout:fixed

{padding-left: # }
{padding-right: # }
{padding-top: # }
{padding-bottom: # }
#=length (px, pt, in, cm, em), %

<P STYLE="border:solid black;
padding-left:25%">
Today is fine.<br>
Tommorow will be fine.
</P>

{padding: # }    #=All margins
{padding: #1 #2}    #1=top & bottom, #2=right & left
{padding: #1 #2 #3}    #1=top, #2=right & left, #3=bottom
{padding: #1 #2 #3 #4}    #1=top, #2=right, #3=bottom, #4=left

<P STYLE="border:solid black;
padding:10pt">
Today is fine.<br>
Tommorow will be fine.
</P>

<P STYLE="border:solid black;
padding:10pt 20pt">
Today is fine.<br>
Tommorow will be fine.
</P>

{margin-left: # }
{margin-right: # }
{margin-top: # }
{margin-bottom: # }
#=length (px, pt, in, cm, em), %

<HR>
<DIV STYLE="border-style:solid;
margin-left:50pt">
Today is fine.<br>
Tommorow will be fine.
</DIV>
<HR>

{margin: # }    #=All margins
{margin: #1 #2}    #1=top & bottom, #2=right & left
{margin: #1 #2 #3}    #1=top, #2=right & left, #3=bottom
{margin: #1 #2 #3 #4}    #1=top, #2=right, #3=bottom, #4=left

<HR>
<DIV STYLE="border-style:solid;
margin:10pt 50pt 0pt">
Today is fine.<br>
Tommorow will be fine.
</DIV>
<HR>

{width: # }
{height: # }
    #=length (px, pt, in, cm, em), %, auto

<DIV STYLE="border:solid black; 
 width:25%; height:150px">
Today is fine.<BR>
Tommorow will be fine.
</DIV>

Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading | Font | Text | List | Color & Background |
Box | Box Positioning | Other|
Style Property LIST


Network Communication Design - http://www.ncdesign.org/
Copyright & Publishing 1994-1999 Yuriko Ienaga yuri@ncdesign.org