BOX PROPERTIES

NCD Style Sheet Guide v6.0

Sponsor's ADs:

+ Box-Oriented Formatting Model

margin
border
padding
content


+ Border Style

{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

Today is fine.
Tommorow will be fine.

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

Today is fine.
Tommorow will be fine.

{border-style: solid }

Today is fine.
Tommorow will be fine.

{border-style: double }

Today is fine.
Tommorow will be fine.

{border-style: groove }

Today is fine.
Tommorow will be fine.

{border-style: ridge }

Today is fine.
Tommorow will be fine.

{border-style: inset }

Today is fine.
Tommorow will be fine.

{border-style: outset }

Today is fine.
Tommorow will be fine.

Sample of the box with different borders for each side


#=3d

{border-style: 3d }

Today is fine.
Tommorow will be fine.



+ Border Width

{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 }

Today is fine.
Tommorow will be fine.

{border-width: medium }

Today is fine.
Tommorow will be fine.

{border-width: thick }

Today is fine.
Tommorow will be fine.



+ Border Color

{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>

Today is fine.
Tommorow will be fine.



+ Border Grouping

{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>

Today is fine.
Tommorow will be fine.

Sample of a box with different borders for each side



+ Outline

{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>

Today is fine.
Tommorow will be fine.


+ Padding

{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>

Today is fine.
Tommorow will be fine.



{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>

Today is fine.
Tommorow will be fine.

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

Today is fine.
Tommorow will be fine.



+ Margin

{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>

Today is fine.
Tommorow will be fine.

{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>

Today is fine.
Tommorow will be fine.



+ Content Dimensions

{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>
Netscape 6 need an "overflow" property to insert line breaks at the right side of the box.
Today is fine.
Tommorow will be fine.


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

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

Min & Max Width sample
Min & Max Height sample


+ Overflow

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

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


{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>
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.


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
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.
text-overflow:ellipsis
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.



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


BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
Copyright & Publishing 1994-2008 Network Communication Design