How to use an image for a border in CSS

Question

I want to set the border of a table to be "1px solid black" except on the bottom, where I want to use an image which provides a pointer into the link - as a visual aid.

Is it possible to set an image as the bottom border when the other borders are regular css.

Answer 1

I don't think so. You're probably better off adding a <DIV> below the table, give it a black border, a fixed background, and some fixed padding or whatnot (to give it some size).

Answer 2

You can set the borders like that except the bottom border :

border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;

For the bottom border, you can set your image as background of a row maybe.

Answer 3

No. Why don't you try another table row for that purpose?

Answer 4

Try putting the table inside <div class="myTableContainer"></div> and then:

.myTableContainer{
  padding-bottom: 1px;
  background: url(myBorderImage.png) bottom left;
}

This should work well across all browsers.

Answer 5

One solution is to style your element with a background image in css and then specify an offset for the background in CSS. The background can poke out from beyond the edge of the element (a div or li element for example). This can be used for many different effects, one being the appearance of a drop shadow using pure css.

Some specifics here:

http://www.alistapart.com/articles/cssdropshadows/

Answer 6

Try putting a below your table then set his style like

.bottomborder {
  height:1px;
  background-image:url("yourImage.png");
}

Should work good.

Edit : and of course border-top, left, right for your table a "solid 1px black"