Openwave Mobile Browser 6.1 and 6.2: XHTML Mobile Profile and CSS Reference

Section 24 out of 38 total sections
Current chapter: CSS Reference

Border Properties

You can use the border properties to set the width, color, and pattern of a border. Elements have no border unless you set one with the border properties or an XHTML-MP attribute.

Borders are described in The CSS Box Model.



border-top-width, border-right-width, border-bottom-width, border-left-width

Sets the width of the top, right, bottom, or left border.

Values

em, ex, cm, mm, in, pt, pc, px, inherit, thin, medium, thick

For more information, see Units of Measure and Keywords.

Default Value

medium

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

You must set a border-style property to solid to display a border; setting the width alone is not sufficient.

Example

table {border-top-width: 2px; border-left-width: 4px; border-style: solid}

Sets a 2-pixel top border and a 4-pixel left border for all tables.



border-width

A shorthand property for setting the width of all four borders: all at once, in sets, or individually, as described in The CSS Box Model.

Values

em, ex, cm, mm, in, pt, pc, px, inherit, thin, medium, thick

For more information, see Units of Measure and Keywords.

Default Value

See the individual border properties.

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

You must set a border-style property to solid to display a border; setting the width alone is not sufficient.

Example

table {border: 4px 2px; border-style: solid}

Sets a 4-pixel top and bottom border and a 2-pixel right and left border for all tables.



border-top-color, border-right-color, border-bottom-color, border-left-color

Sets the color of the top, right, bottom, or left border.

Values

See Colors.

Default Value

The current foreground color of the element.

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

You must set a border-style property to solid to display a border; setting the color alone is not sufficient.

Example

table {border-top-color: red; border-left-color: green}

Sets the top borders to red and left borders to green for all tables.



border-color

A shorthand property for setting the color of all four borders: all at once, in sets, or individually, as described in The CSS Box Model.

Values

See Colors.

Default Value

The current foreground color of the element.

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

You must set a border-style property to solid to display a border; setting the color alone is not sufficient.

Example

table {border-color: red green; border-style: solid}

Sets the top and bottom borders of tables to green and their right and left borders to red.



border-top-style, border-right-style, border-bottom-style, border-left-style

Sets the style of the top, right, bottom, or left border.

Values

none, hidden, solid

Default Value

none

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

Unless you set a border's style to solid, other border settings have no visible effect.

Hidden borders have no width, that is, they're not merely transparent or invisible. Irrespective of their other properties, they are ignored by the browser.

For a discussion of the difference between the none and hidden keywords, see section 17.6.2, "The Collapsing Border Model," in the W3C CSS2 specification.

Example

table {border-top-style: solid}

Sets the top borders of all tables to a solid line.



border-style

A shorthand property for setting the style of all four borders: all at once, in sets, or individually, as described in The CSS Box Model.

Values

none, hidden, solid

Default Value

See the individual border style properties.

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Example

table {border-style: solid}

Sets all borders of all tables to a solid line.



border-top, border-right, border-bottom, border-left

Shorthand properties for setting the width, color, and style of the top, right, bottom, or left border.

Values

See the values for border-width, border-color, and border-style.

Default Value

None.

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

Because they share no common values, you can use the width, color, and style values in any order.

Example

table {border-top: thick solid green}

Sets the top borders of all tables to a thick solid green line.



border

A shorthand property for setting the width, color, and style of all four borders.

Values

See the values for border-width, border-color, and border-style.

Default Value

See the individual border properties.

Useful For

Block elements and replaced inline elements (such as <img> and <object>).

Inherited

No.

Notes

Because they share no common values, you can use the width, color, and style values in any order.

Example

table {border: thin solid red}

Sets all borders of all tables to a thin solid red line.