Style Sheets Properties Guide
=Border Properties=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Main Index |
Style Sheet Index |
Top Of Tree |
Tag Index |
Tag 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 [IE | N4B4]
- Applicable Tags: 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] |
IE | N4B4 |
Please see the description of allowed values in the
'border-width' property. |
| [border-style] |
[line-style] |
IE | N4B4 |
Please see the explanations of these values in the
'border-style' property. |
| [border-color] |
[color] |
IE | N4B4 |
Please see the explanations of these values in the
'border-color' property. |
- border-top [IE | N]
- Applicable Tags: 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] |
IE | N |
Please see the description of allowed values in the
'border-width' property. |
| [border-style] |
[line-style] |
IE | N |
Please see the explanations of these values in the
'border-style' property. |
| [border-color] |
[color] |
IE | N |
Please see the explanations of these values in the
'border-color' property. |
- border-right [IE | N]
- Applicable Tags: 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] |
IE | N |
Please see the description of allowed values in the
'border-width' property. |
| [border-style] |
[line-style] |
IE | N |
Please see the explanations of these values in the
'border-style' property. |
| [border-color] |
[color] |
IE | N |
Please see the explanations of these values in the
'border-color' property. |
- border-bottom [IE | N]
- Applicable Tags: 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] |
IE | N |
Please see the description of allowed values in the
'border-width' property. |
| [border-style] |
[line-style] |
IE | N |
Please see the explanations of these values in the
'border-style' property. |
| [border-color] |
[color] |
IE | N |
Please see the explanations of these values in the
'border-color' property. |
- border-left [IE | N]
- Applicable Tags: 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] |
IE | N |
Please see the description of allowed values in the
'border-width' property. |
| [border-style] |
[line-style] |
IE | N |
Please see the explanations of these values in the
'border-style' property. |
| [border-color] |
[color] |
IE | N |
Please see the explanations of these values in the
'border-color' property. |
- border-width [IE | N4B3]
- Applicable Tags: 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>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| thin | medium |
thick |
explicit |
IE | 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 |
IE | 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 [IE | N4B3]
- Applicable Tags: 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.
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| [border-width] |
[width] |
IE | N4B3 |
Please see the description of allowed values in the
'border-width' property. |
- border-right-width [IE | N4B3]
- Applicable Tags: 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.
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| [border-width] |
[width] |
IE | N4B3 |
Please see the description of allowed values in the
'border-width' property. |
- border-bottom-width [IE | N4B3]
- Applicable Tags: 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.
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| [border-width] |
[width] |
IE | N4B3 |
Please see the description of allowed values in the
'border-width' property. |
- border-left-width [IE | N4B3]
- Applicable Tags: 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.
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| [border-width] |
[width] |
IE | N4B3 |
Please see the description of allowed values in the
'border-width' property. |
- border-style [IE | N4B3]
- Applicable Tags: 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>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| none |
explicit |
IE | 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 |
IE | N4B3 |
A solid line. |
| groove |
explicit |
IE | N4B3 |
A 3-D groove is drawn based upon the [color] value. |
| ridge |
explicit |
IE | N4B3 |
A 3-D ridge is rendered based upon the [color] value. |
| inset |
explicit |
IE | N4B3 |
A 3-D inset is rendered based upon the [color] value. |
| outset |
explicit |
IE | N4B3 |
A 3-D outset is rendered based upon the [color] value. |
| double |
explicit |
IE | 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 [IE | N4B3]
- Applicable Tags: 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>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| [color] |
explicit |
IE | 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....