15.4.Shorthand Properties for Setting Border Style, Width and Color All at Once

The border WCSS property is a shorthand property for setting the border style, width and color all at once. The following WAP CSS style statement demonstrates the usage of border:


table {border: 2px solid black}


The above WAP CSS style statement specifies that table borders are of 2-pixels wide, have the solid style and are in black color.

You can specify the border style, width and color in any order you like. The following two WAP CSS style statements are also valid:


table {border: solid black 2px}

table {border: black 2px solid}


The border WCSS property affects four sides of the border. The border-top, border-right, border-bottom and border-left WCSS properties are used in the same way as the border WCSS property, except that they are used for setting the top, right, bottom and left borders.


15.5. Example: Applying WAP CSS Border Properties to Tables

Below is a simple WAP CSS example that illustrates how to set the border style, border width and border color of a table by making use of the border properties that you have just learned.

These are what we want to do in the example:

Here is the markup:


(borderPropertiesEg1.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Setting Table Border</title>
    <style type="text/css">
      table {border: thick solid purple}
      td {
        border-width: thin;
        border-style: solid;
        border-color: black
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td>Cell A</td>
        <td>Cell B</td>
        <td>Cell C</td>
      </tr>

      <tr>
        <td>Cell D</td>
        <td>Cell E</td>
        <td rowspan="2">Cell F</td>
      </tr>

      <tr>
        <td colspan="2">Cell G</td>
      </tr>
    </table>
  </body>
</html>


Below is the screenshot of the above WAP CSS example in a mobile phone browser:



Nokia Mobile Browser 4.0


Previous Page Page 23 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.