Custom Image Borders with CSS?

Zdroyd

New Member
Messages
548
Reaction score
0
Points
0
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

New Member
Messages
629
Reaction score
0
Points
0
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

New Member
Messages
548
Reaction score
0
Points
0
... 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

New Member
Messages
221
Reaction score
0
Points
0
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.
Code:
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;
}
 
Last edited:

Zdroyd

New Member
Messages
548
Reaction score
0
Points
0
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" />
 
Last edited:

alz4445

New Member
Messages
124
Reaction score
0
Points
0
No. You can't do it like that.
Code:
<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.
 
Last edited:

Zdroyd

New Member
Messages
548
Reaction score
0
Points
0
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...
 
Top