Custom Image Borders with CSS?

[Zdroyd]

Is it possible to use CSS to make a custom boarder that uses an image file for the line?

And can this also be used to make rounded corners?

Thank you ahead of time...

 

[freecrm]

Is it possible to use CSS to make a custom boarder that uses an image file for the line?

And can this also be used to make rounded corners?

Thank you ahead of time...

In direct answer to your question... yep.

The way image borders are created is to position images (in css) relatively within <div>'s, not customising the border itself.

However, it gets a bit tricky as each div can only load one image, so you have to set a div within a div within a div etc. (unless someone can tell me otherwise)

And yes, this is the way I do rounded corners. I use a block with a plain colour background and then create rounded .jpg corners in that background colour (with white on the outside)

 

[Zdroyd]

... So can anyone tell me how to do it?

It will be very helpful for me to know...

(Note that I do not have to have rounded corners, I really just need ANY way to make a image boarder for tables.)

 

[sourfacedcyclop]

You could load the image you want inside of another, larger image with rounded corners, this would give the illusion of rounded corners and custom borders. It might look something like this.

div#table1 table tr td {
background:url('imageinbghere') no-repeat;
width:whatever;
height:whatever;
}
div#table1 table tr td img {
position:relative;
width:whatever;
height:whatever;
}

 

[Zdroyd]

So everyone is telling me that it is not possible to simply have the borders drawn with an image?

Something like:
<table top_border = "/borderfile.jpg" bottom_border = "/border2file.jpg" />

 

[alz4445]

No. You can't do it like that.

<div class="left"></div>
<div class="top"></div>
<div class="mid">content</div>
<div class="right"></div>
<div class="bot"></div>

And in CSS set all of them to float left, and set the background images as the images you want around the outside, in bot, left, right and top. Mid for the middle etc.

With tables, just add another 2 rows, and 2 columns. In the top left corner, add the rounded edge, the same for all of the other corners, and you get the picture for the top/bottom and left/right.

 

[Zdroyd]

But it will not custom strech when I have the tables size be a %.

I suppose that is alright, I will just change my idea to make it so I do not have to have borders. *cry*

Thank you all for the help...