CODEWITHSUNDEEP
htmlcssimagestylesborder
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Reputation: 5759

Custom html borders from image

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

Upvotes: 1

Views: 3881

Answers (2)

Matthew Lock
Matthew Lock

Reputation: 13506

CSS3 supports image borders: http://www.norabrowndesign.com/css-experiments/border-image-anim.html but browser support is poor on IE http://caniuse.com/#feat=border-image

Upvotes: 2

Ben D
Ben D

Reputation: 14479

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/

Upvotes: 3

Related Questions