Table of contents

Appendices

7.7 Common Border, Padding, and Background Properties

The following common-border-padding-and-background-properties are taken from CSS2. Those "border", "padding", and "background" properties that have a before, after, start, or end suffix are writing-mode relative and are XSL-only properties.

background-attachment[top]

CSS2 Definition:

CSS2 Reference: [ "background-attachment" property ] http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-attachment

scroll

The background-image may scroll with the enclosing object.

fixed

The background-image is to be fixed within the viewable area of the enclosing object.

If a background-image is specified, this property specifies whether it is fixed with regard to the viewport (fixed) or scrolls along with the document (scroll).

Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ("background-repeat: repeat"), it may be invisible.

User agents may treat fixed as scroll. However, it is recommended they interpret fixed correctly, at least for the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support fixed. See the section on conformance for details.

XSL modifications to the CSS definition:

The last paragraph in the CSS description does not apply.

background-color[top]

CSS2 Definition:

CSS2 Reference: [ "background-color" property ] http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-color

This property sets the background color of an element, either a <color> value or the keyword transparent, to make the underlying colors shine through.

transparent

The underlying colors will shine through.

<color>

Any valid color specification.

XSL modifications to the CSS definition:

XSL adds an "rgb-icc" function (see [expr-color-functions] ) as a valid value of this property.

background-image[top]

CSS2 Definition:

CSS2 Reference: [ "background-image" property ] http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-image

This property sets the background image of an element. When setting a "background-image", authors should also specify a background-color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).

Values for this property are either <uri-specification>, to specify the image, or "none", when no image is used.

none

No image is specified.

<uri-specification>

XSL modifications to the CSS definition:

The <uri> value has been changed to a <uri-specification>.

background-repeat[top]

CSS2 Definition:

CSS2 Reference: [ "background-repeat" property ] http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-repeat

If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content and padding areas of a box. Values have the following meanings:

repeat

The image is repeated both horizontally and vertically.

repeat-x

The image is repeated horizontally only.

repeat-y

The image is repeated vertically only.

no-repeat

The image is not repeated: only one copy of the image is drawn.

XSL modifications to the CSS definition:

"Horizontal" and "vertical" are defined relative to the reference-orientation; "horizontal" is "left" to "right", and "vertical" is "top" to "bottom".

NOTE: 

Thus for a rotated area the tiling is also rotated. It is, however, independent of the writing-mode.

background-position-horizontal[top]

A Property Derived from a CSS2 Property.

If a "background-image" has been specified, this property specifies its initial position horizontally.

<percentage>

Specifies that a point, at the given percentage across the image from left-to-right, shall be placed at a point at the given percentage across, from left-to-right, the area's padding-rectangle.

NOTE: 

For example with a value of 0%, the left-edge of the image is aligned with the left-edge of the area's padding-rectangle. A value of 100% places the right-edge of the image aligned with the right-edge of the padding-rectangle. With a value of 14%, a point 14% across the image is to be placed at a point 14% across the padding-rectangle.

<length>

Specifies that the left-edge of the image shall be placed at the specified length to the right of the left-edge of the padding-rectangle.

NOTE: 

For example with a value of 2cm, the left-edge of the image is placed 2cm to the right of the left-edge of the padding-rectangle.

left

Same as 0%.

center

Same as 50%.

right

Same as 100%.

XSL modifications to the CSS definition:

"Left" and "right" are defined relative to the reference-orientation.

background-position-vertical[top]

A Property Derived from a CSS2 Property.

If a "background-image" has been specified, this property specifies its initial position vertically.

<percentage>

Specifies that a point, at the given percentage down the image from top-to-bottom, shall be placed at a point at the given percentage down, from top-to-bottom, the area's padding-rectangle.

NOTE: 

For example with a value of 0%, the top-edge of the image is aligned with the top-edge of the area's padding-rectangle. A value of 100% places the bottom-edge of the image aligned with the bottom-edge of the padding-rectangle. With a value of 84%, a point 84% down the image is to be placed at a point 84% down the padding-rectangle.

<length>

Specifies that the top-edge of the image shall be placed at the specified length below the top-edge of the padding-rectangle.

NOTE: 

For example with a value of 2cm, the top-edge of the image is placed 2cm below the top-edge of the padding-rectangle.

top

Same as 0%.

center

Same as 50%.

bottom

Same as 100%.

XSL modifications to the CSS definition:

"Top" and "bottom" are defined relative to the reference-orientation.

border-before-color[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the color of the border on the before-edge of a block-area or inline-area.

See definition of property border-top-color ( [border-top-color] ).

border-before-style[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-style for the before-edge.

See definition of property border-top-style ( [border-top-style] ).

border-before-width[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-width for the before-edge.

See definition of property border-top-width ( [border-top-width] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the border for the before-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the border should be 0pt or retained if its associated edge is a leading-edge in a reference-area for areas generated from this formatting object that have an is-first value of "false". See [spacecond] for further details. The initial value of the .conditionality component is "discard".

If border-before-width is specified using <length>, the formatter shall convert the single value to components as follows:

• border-before-width.length: the resultant computed value of the <length>.

• border-before-width.conditional: discard.

If border-before-width is specified using one of the width keywords the .conditional component is set to "discard" and the .length component to a User Agent dependent length.

NOTE: 

If the border-style is "none" the computed value of the width is forced to "0pt".

border-after-color[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the color of the border on the after-edge of a block-area or inline-area.

See definition of property border-top-color ( [border-top-color] ).

border-after-style[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-style for the after-edge.

See definition of property border-top-style ( [border-top-style] ).

border-after-width[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-width for the after-edge.

See definition of property border-top-width ( [border-top-width] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the border for the after-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the border should be 0 or retained if its associated edge is a trailing-edge in a reference-area for areas generated from this formatting object that have an is-last value of "false". See [spacecond] for further details. The initial value of the .conditionality component is "discard".

NOTE: 

If the border-style is "none" the computed value of the width is forced to "0pt".

border-start-color[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the color of the border on the start-edge of a block-area or inline-area.

See definition of property border-top-color ( [border-top-color] ).

border-start-style[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-style for the start-edge.

See definition of property border-top-style ( [border-top-style] ).

border-start-width[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-width for the start-edge.

NOTE: 

If the border-style is "none" the computed value of the width is forced to "0pt".

See definition of property border-top-width ( [border-top-width] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the border for the start-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the border should be 0 or retained if its associated edge is a leading-edge in a line-area for areas generated from this formatting object that have an is-first value of "false". See [area-space] for further details. The initial value of the .conditionality component is "discard".

border-end-color[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the color of the border on the end-edge of a block-area or inline-area.

See definition of property border-top-color ( [border-top-color] ).

border-end-style[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-style for the end-edge.

See definition of property border-top-style ( [border-top-style] ).

border-end-width[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the border-width for the end-edge.

NOTE: 

If the border-style is "none" the computed value of the width is forced to "0pt".

See definition of property border-top-width ( [border-top-width] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the border for the end-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the border should be 0 or retained if its associated edge is a trailing-edge in a line-area for areas generated from this formatting object that have an is-last value of "false". See [area-space] for further details. The initial value of the .conditionality component is "discard".

border-top-color[top]

CSS2 Definition:

CSS2 Reference: [ "border-top-color" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-top-color

The 'border-color' property sets the color of the four borders. Values have the following meanings:

<color>

Any valid color specification.

If an element's border color is not specified with a "border" property, user agents must use the value of the element's "color" property as the computed value for the border color.

border-top-style[top]

CSS2 Definition: as amended by [http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x9]

CSS2 Reference: [ "border-top-style" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-top-style

The border style properties specify the line style of a box's border (solid, double, dashed, etc.).

The properties defined in this section refer to the <border-style> value type, which may take one of the following:

none

No border. This value forces the computed value of 'border-width' to be '0'.

hidden

Same as 'none', except in terms of border conflict resolution for table elements.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of 'groove': the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.

All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' should be based on the element's 'border-color' property, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

Conforming HTML user agents may interpret 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', and 'outset' to be 'solid'.

border-top-width[top]

CSS2 Definition:

CSS2 Reference: [ "border-top-width" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-top-width

The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

The interpretation of the first three values depends on the user agent. The following relationships must hold, however:

• 'thin' <='medium' <= 'thick'.

• Furthermore, these widths must be constant throughout a document.

border-bottom-color[top]

CSS2 Definition:

CSS2 Reference: [ "border-bottom-color" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-bottom-color

Specifies the border color for the bottom-edge.

See definition of property border-top-color ( [border-top-color] ).

border-bottom-style[top]

CSS2 Definition:

CSS2 Reference: [ "border-bottom-style" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-bottom-style

Specifies the border style for the bottom-edge.

See definition of property border-top-style ( [border-top-style] ).

border-bottom-width[top]

CSS2 Definition:

CSS2 Reference: [ "border-bottom-width" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-bottom-width

Specifies the border width for the bottom-edge.

See definition of property border-top-width ( [border-top-width] ).

border-left-color[top]

CSS2 Definition:

CSS2 Reference: [ "border-left-color" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-left-color

Specifies the border color for the left-edge.

See definition of property border-top-color ( [border-top-color] ).

border-left-style[top]

CSS2 Definition:

CSS2 Reference: [ "border-left-style" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-left-style

Specifies the border style for the left-edge.

See definition of property border-top-style ( [border-top-style] ).

border-left-width[top]

CSS2 Definition:

CSS2 Reference: [ "border-left-width" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-left-width

Specifies the border width for the left-edge.

See definition of property border-top-width ( [border-top-width] ).

border-right-color[top]

CSS2 Definition:

CSS2 Reference: [ "border-right-color" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-right-color

Specifies the border color for the right-edge.

See definition of property border-top-color ( [border-top-color] ).

border-right-style[top]

CSS2 Definition:

CSS2 Reference: [ "border-right-style" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-right-style

Specifies the border style for the right-edge.

See definition of property border-top-style ( [border-top-style] ).

border-right-width[top]

CSS2 Definition:

CSS2 Reference: [ "border-right-width" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-right-width

Specifies the border width for the right-edge.

See definition of property border-top-width ( [border-top-width] ).

padding-before[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the width of the padding on the before-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the padding for the before-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the padding should be 0 or retained if its associated edge is a leading-edge in a reference-area for areas generated from this formatting object that have an is-first value of "false". See [spacecond] for further details. The initial value of the .conditionality component is "discard".

padding-after[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the width of the padding on the after-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the padding for the after-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the padding should be 0 or retained if its associated edge is a trailing-edge in a reference-area for areas generated from this formatting object that have an is-last value of "false". See [spacecond] for further details. The initial value of the .conditionality component is "discard".

padding-start[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the width of the padding on the start-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the padding for the start-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the padding should be 0 or retained if its associated edge is a leading-edge in a line-area for areas generated from this formatting object that have an is-first value of "false". See [area-space] for further details. The initial value of the .conditionality component is "discard".

padding-end[top]

Writing-mode Relative Equivalent of a CSS2 Property.

Specifies the width of the padding on the end-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).

XSL modifications to the CSS definition:

The following value type has been added for XSL:

<length-conditional>

A compound value specifying the width and any conditionality of the padding for the end-edge.

The .length component is a <length>. It may not be negative. The .conditionality component may be set to "discard" or "retain" to control if the padding should be 0 or retained if its associated edge is a trailing-edge in a line-area for areas generated from this formatting object that have an is-last value of "false". See [area-space] for further details. The initial value of the .conditionality component is "discard".

padding-top[top]

CSS2 Definition:

CSS2 Reference: [ "padding-top" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-top

<length>

Specifies the width of the padding on the top-edge of a block-area or inline-area. Unlike margin properties, values for padding properties cannot be negative.

padding-bottom[top]

CSS2 Definition:

CSS2 Reference: [ "padding-bottom" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-bottom

Specifies the width of the padding on the bottom-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).

padding-left[top]

CSS2 Definition:

CSS2 Reference: [ "padding-left" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-left

Specifies the width of the padding on the left-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).

padding-right[top]

CSS2 Definition:

CSS2 Reference: [ "padding-right" property ] http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-right

Specifies the width of the padding on the right-edge of a block-area or inline-area.

See definition of property padding-top ( [padding-top] ).