<!DOCTYPE html>
<html>
  <head>
    <style>
      table { width: 700px; }
      td { width: 400px; }
      b {  border: solid blue; }
      i { background-color: green; }
      .nonBlueBorder { border-color: red; }
      .borderImage { border-image:url("resources/greenbox.png") 3 3 repeat; }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>top</td>
        <td>
          <b>
            <i style="
                margin: -30px 0px 0px 0px;
                padding: 1px 0px 0px 0px;">
                Here is some text.
            </i>
          </b>
        </td>
      </tr>
    </table>

    <table>
      <tr>
        <td>right</td>
        <td>
          <b class=nonBlueBorder>
            <i style="
                margin: 0px -208px 0px 0px;
                padding: 0px 1px 0px 0px;">
                Here is some text.
            </i>
          </b>
        </td>
      </tr>
    </table>

    <table>
      <tr>
        <td>bottom</td>
        <td>
          <b>
            <i style="
                margin: 0px 0px -30px 0px;
                padding: 0px 0px 1px 0px;">
                Here is some text.
            </i>
          </b>
        </td>
      </tr>
    </table>

    <table>
      <tr>
        <td>left</td>
        <td>
          <b class=nonBlueBorder>
            <i style="
                margin: 0px 0px 0px -208px;
                padding: 0px 0px 0px 31px;">
                Here is some text.
            </i>
          </b>
        </td>
      </tr>
    </table>

    <table>
      <tr>
        <td>left</td>
        <td>
          <b class=borderImage>
            <i style="
                margin: 0px 0px 0px -208px;
                padding: 0px 0px 0px 31px;">
                Here is some text.
            </i>
          </b>
        </td>
      </tr>
    </table>
  </body>
</html>
