---

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>

{outline-style: # }
{outline-width: # }
{outline-color: # }     #=same value of border

{outline: # }     #=#width #style #color

Outline is supported only by Macintosh IE 5.

<P STYLE="border:solid medium orange;
          outline:solid medium red">
Today is fine.<br>
Tommorow will be fine.
</P>

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

<P STYLE="border:solid black;
padding-left:25px">
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;
 overflow:auto">
Today is fine.<BR>
Tommorow will be fine.
</DIV>

Minimum & Maximum Dimensions
{min-width: # }
{min-height: # }
    #=length (px, pt, in, cm, em), %

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

{overflow: # }     #=visible, hidden, scroll, auto

<DIV STYLE="height:100px; width:100px;
 border:solid black; overflow:#">
   Today is fine....Today is fine.
</DIV>

{overflow-x: # }
{overflow-y: # }     #=visible, hidden, scroll, auto

<DIV STYLE="height:100px; width:100px;
 border:solid black;
 overflow-x:scroll; overflow-y:hidden">
<NOBR>Today is fine....</NOBR>
</DIV>

Ellipsis for Overflow Text
{text-overflow: # }     #=clip, ellipsis

<DIV STYLE="height:30px; width:250px; border:solid 2px skyblue; 
            overflow:hidden; text-overflow:#">
   <nobr>Long before the advent of TV weather forecasters,
   people used tabletop glasses like a spherical flask
   to predict upcoming changes in weather.</nobr>
</DIV>

text-overflow:clip

text-overflow:ellipsis

Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading
Font | Text | List | Color & Background | Box | Table | Position & Format | Other|
Selector List | Property List


Network Communication Design - /
Copyright & Publishing 1994-2008 Network Communication Design