15. WCSS Border Properties

WCSS border properties allow mobile Internet application developers to control three aspects of a border: style, width and color.

15.1. Setting the Border Style (border-style Property)

The style of a border is specified with the border-style WCSS property. A number of keywords can be its value. However, only the none and solid keywords are commonly supported by WAP browsers. Set the solid keyword to the border-style WCSS property if you want a visible border. Here is a WAP CSS example that illustrates the usage of border-style:

table {border-style: solid}

The border-style WCSS property affects four sides of the border. The border-top-style, border-right-style, border-bottom-style and border-left-style WCSS properties can be used to set the border style for the top, right, bottom and left borders respectively.

15.2. Setting the Border Width (border-width Property)

The width of a border is specified with the border-width WCSS property. This property accepts a length value. (We have talked about length property values in the "Common Types of Property Value: Length" section of this WAP CSS tutorial. Refer to it for the details.) It also accepts one of the following three keywords: thin, medium and thick. Here is a WAP CSS example that illustrates the usage of border-width:

table {border-width: thin; border-style: solid}

Note that setting the border width alone does not make the border visible. You must set the border-style WCSS property to an appropriate value (such as solid).

The border-width WCSS property affects four sides of the border. The border-top-width, border-right-width, border-bottom-width and border-left-width WCSS properties can be used to set the border width for the top, right, bottom and left borders respectively.

15.3. Setting the Border Color (border-color Property)

The color of a border is specified with the border-color WCSS property. This property accepts a color value (We have discussed color property values in detail in the "Common Types of Property Value: Color" section of this WAP CSS tutorial). Here shows some WAP CSS examples that illustrate the usage of border-color:

table {border-color: blue; border-style: solid}

table {border-color: #0000ff; border-style: solid}

table {border-color: rgb(0,0,255); border-style: solid}

The above three WAP CSS style statements have the same meaning. They specify that the border of tables should be displayed in blue.

Note that setting the border color alone does not make the border visible. You must set the border-style WCSS property to an appropriate value (such as solid).

The border-color WCSS property affects four sides of the border. The border-top-color, border-right-color, border-bottom-color and border-left-color WCSS properties can be used to set the border color for the top, right, bottom and left borders respectively.

Previous Page

Page 22 of 39

Next Page