Style Sheets Properties Guide
=Border Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

border | border-top | border-right | border-bottom
border-left | border-width | border-top-width | border-right-width
border-bottom-width | border-left-width | border-style | border-color
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Box properties treat all block-level formatting elements like a virtual 'box'. The height and width of the box is determined by (going from inner-most dimension outward) the height and width of the contained elements (text and/or images) plus heights and widths for space around the element ('padding'), plus the height and widths created by added borders ('border'), along with exterior margin values ('margin') relative to elements exterior to the virtual box.

The border properties allow borders to be defined (of course) for any element. These properties give a much wider array of display options for creating line effects around elements than has previously been possible in HTML. If a border is rendered for an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.


border [ IE4B2 | N4B4 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This is a shorthand property which allows an author to specify 'border-top', 'border-right', 'border-bottom', and 'border-left' properties using a single property and value notation. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border: [width] [line-style] [color] }
Example
Ext/Doc: blockquote { border: medium dashed #ff0000 }
In-Line:  <blockquote STYLE="border: medium dashed #ff0000">this is a beautiful blockquote test</blockquote>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N4B4 Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE4B2 | N4B4 Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE4B2 | N4B4 Please see the explanations of these values in the 'border-color' property.


border-top [ IE4B2 | N ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the top border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-top: [width] [line-style] [color] }
Example
Ext/Doc: div.out { border-top: 10px outset #ffffff }
In-Line:  <div STYLE="border-top: 10px outset #ffffff">this is a beautiful test</div>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE4B2 | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE4B2 | N Please see the explanations of these values in the 'border-color' property.


border-right [ IE4B2 | N ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the right border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-right: [width] [line-style] [color] }
Example
Ext/Doc: em { border-right: thick double yellow }
In-Line:  <em STYLE="border-right: thick double yellow">this is a beautiful test</em>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE4B2 | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE4B2 | N Please see the explanations of these values in the 'border-color' property.


border-bottom [ IE4B2 | N ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the bottom border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-bottom: [width] [line-style] [color] }
Example
Ext/Doc: span { border-bottom: solid green }
In-Line:  <span STYLE="border-bottom: solid green">this is a beautiful test</span>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE4B2 | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE4B2 | N Please see the explanations of these values in the 'border-color' property.


border-left [ IE4B2 | N ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the left border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-left: [width] [line-style] [color] }
Example
Ext/Doc: strong { border-left: thin groove blue }
In-Line:  <strong STYLE="border-left: thin groove blue">this is a beautiful test</strong>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE4B2 | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE4B2 | N Please see the explanations of these values in the 'border-color' property.


border-width [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This property controls the thickness for one to four border sides. If multiple borders are specified, they are given as a space separated list of width values.
Value assignments:
   1 value present: All four borders are set to that value.
   2 values present: Top and bottom borders receive first value while right and left borders are set to the second value.
   3 values present: Top - first value, right&left - second value, bottom - third value.
   4 values present: Top, right, bottom and left respectively.
Usage:
Selector { border-width: [width] }
Example
Ext/Doc: strong { border-width: thick }
In-Line:  <strong STYLE="border-width: thick">this is a beautiful test</strong>
Browser Notes
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements.)
Allowed
Values
 Value
Type
 Browser
Support
 Description
thin | medium | thick explicit IE4B2 | N4B3 These values set the weight (thickness) of the line used to draw the borders. The browser will determine what thicknesses these keywords shall hold. 'medium' is the default value.
[length] calculated IE4B2 | N4B3 This is an explicit or relative size measurement of the thickness of the border. Consult the Units Page for acceptable length unit systems.


border-top-width [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the top border.
Usage:
Selector { border-top-width: [width] }
Example
Ext/Doc: strong { border-top-width: thin }
In-Line:  <strong STYLE="border-top-width: thin">this is a beautiful test</strong>
Browser Notes
- Netscape 4 Beta 3 Rendering of border properties on single sides (in contrast to using the shorthand 'border-width' property) cuts in to the rendering of adjacent elements.
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements.) Interesting to note that width for a side on this version is also applied to the opposing side as well.
- Internet Explorer 4.0 Beta 2 Width for a border-side is applied appropriately, but all other sides receive a minimum value thickness as well.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N4B3 Please see the description of allowed values in the 'border-width' property.


border-right-width [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the right border.
Usage:
Selector { border-right-width: [width] }
Example
Ext/Doc: strong { border-right-width: 10px }
In-Line:  <strong STYLE="border-right-width: 10px">this is a beautiful test</strong>
Browser Notes
- Netscape 4 Beta 3 Rendering of border properties on single sides (in contrast to using the shorthand 'border-width' property) cuts in to the rendering of adjacent elements.
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements.) Interesting to note that width for a side on this version is also applied to the opposing side as well.
- Internet Explorer 4.0 Beta 2 Width for a border-side is applied appropriately, but all other sides receive a minimum value thickness as well.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N4B3 Please see the description of allowed values in the 'border-width' property.


border-bottom-width [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the bottom border.
Usage:
Selector { border-bottom-width: [width] }
Example
Ext/Doc: strong { border-bottom-width: medium }
In-Line:  <strong STYLE="border-bottom-width: medium">this is a beautiful test</strong>
Browser Notes
- Netscape 4 Beta 3 Rendering of border properties on single sides (in contrast to using the shorthand 'border-width' property) cuts in to the rendering of adjacent elements.
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements.) Interesting to note that width for a side on this version is also applied to the opposing side as well.
- Internet Explorer 4.0 Beta 2 Width for a border-side is applied appropriately, but all other sides receive a minimum value thickness as well.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N4B3 Please see the description of allowed values in the 'border-width' property.


border-left-width [ IE4B2 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the left border.
Usage:
Selector { border-left-width: [width] }
Example
Ext/Doc: strong { border-left-width: 5mm }
In-Line:  <strong STYLE="border-left-width: 5mm">this is a beautiful test</strong>
Browser Notes
- Netscape 4 Beta 3 Rendering of border properties on single sides (in contrast to using the shorthand 'border-width' property) cuts in to the rendering of adjacent elements.
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements.) Interesting to note that width for a side on this version is also applied to the opposing side as well.
- Internet Explorer 4.0 Beta 2 Width for a border-side is applied appropriately, but all other sides receive a minimum value thickness as well.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[border-width] [width] IE4B2 | N4B3 Please see the description of allowed values in the 'border-width' property.


border-style [ IE4B1 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: none
What Is It?
This property controls the type of line used for the border of the current element. It uses from one to four space separated values which are bound to the four borders as illustrated in the "What Is It?" section of the 'border-width' attribute.
Usage:
Selector { border-style: [line-style] }
Example
Ext/Doc: strong { border-style: groove }
In-Line:  <strong STYLE="border-style: groove">this is a beautiful test</strong>
Browser Notes
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements), and values of NONE and SOLID were the only ones supported.
Allowed
Values
 Value
Type
 Browser
Support
 Description
none explicit IE4B1 | N4B3 Default value. No border is rendered, regardless of any 'border-width' present.
dotted explicit IE | N A dotted line drawn on top of the background of the element.
dashed explicit IE | N A dashed line drawn on top of the background of the element.
solid explicit IE4B1 | N4B3 A solid line.
groove explicit IE4B2 | N4B3 A 3-D groove is drawn based upon the [color] value.
ridge explicit IE4B2 | N4B3 A 3-D ridge is rendered based upon the [color] value.
inset explicit IE4B2 | N4B3 A 3-D inset is rendered based upon the [color] value.
outset explicit IE4B2 | N4B3 A 3-D outset is rendered based upon the [color] value.
double explicit IE4B2 | N4B3 A double line drawn on top of the background of the element. The two lines with the space between adds up to the 'border-width' properties.


border-color [ IE4B1 | N4B3 ]
Applicable Elements: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: The value of the 'color' property.
What Is It?
This property controls the color for one to four border sides. It uses from one to four space separated values which are bound to the four borders as illustrated in the "What Is It?" section of the 'border-width' attribute. If no color is specified, this value will be taken from the 'color' property.
Usage:
Selector { border-color: [color] }
Example
Ext/Doc: strong { border-color: blue }
In-Line:  <strong STYLE="border-color: blue">this is a beautiful test</strong>
Browser Notes
- Internet Explorer 4.0 Beta 1 Limited support existed for this property only with certain elements (such as with images but not block elements.)
Allowed
Values
 Value
Type
 Browser
Support
 Description
[color] explicit IE4B1 | N4B3 This value specifies the color to use in creating the border. Please see the section on Color Units for more details.


Boring Copyright Stuff....