CODEWITHSUNDEEP
cssimageborder
Ankur
Ankur

Reputation: 51108

How to use an image for a border in CSS

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.

Upvotes: 12

Views: 46931

Answers (8)

loler
loler

Reputation: 2587

Now there is CSS3 and a border-image property for that, but still it does not work for all browsers.

OK, let's there be a W3Schools link on this topic.

Upvotes: 2

Brian H
Brian H

Reputation: 4110

CSS3 has added support for border-image. You can find more information at http://www.w3.org/TR/css3-background/#border-images. At this point (early 2012), it's probably not safe to use due to lack of support in all versions of IE. To track when it is safe to use you can visit http://caniuse.com/#search=border-image. One way to simulate the border-image style is to use a positioned background-image. For example, to simulate a top border:

div
{
  background-image: url('topBorder.gif');
  background-position: top;
  background-repeat: repeat-x;
}

Upvotes: 5

Clement Herreman
Clement Herreman

Reputation: 10536

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"

Upvotes: 1

Gordon Potter
Gordon Potter

Reputation: 5862

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/

Upvotes: 2

warpech
warpech

Reputation: 6433

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.

Upvotes: 14

usoban
usoban

Reputation: 5478

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

Upvotes: 1

Canavar
Canavar

Reputation: 48098

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.

Upvotes: 0

exclsr
exclsr

Reputation: 3357

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).

Upvotes: 2

Related Questions