Question

Is it possible to create a custom border for an html table from an image that i create? I am using adobe fireworks and want to use one of their brushes as my table border. So far I have only found how to use the preset border like the following:

<STYLE type="text/css">
.table{
    border-style:outset;
    border-color: red;
    border-width:10px;
      }
</style>

Instead of using the border style: outset, I would like to create my own. The code from above was based on code from This website

Answer 1

It’s not well supported across browsers, but you should have a look at the css3 attribute border-image:

-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;

IE is the odd man out here, but otherwise it should work well. There’s a good article here: http://www.css3.info/preview/border-image/