Brad Brett
asked on
DIV border Image
I want CSS2 and HTML code to make the div border as the image below (on all div sizes).
Here is the border I have:
border.png
Here is the border I have:
border.png
http://www.w3.org/Style/Examples/007/roundshadow.en.html
this is better explained with both points...
this is better explained with both points...
ASKER
@rikin_shah: How can I do that by using the image itself?
Is this any use:
<style>
.table-wrapper { border-collapse:collapse; }
.top-left { width:36px; height:36px; background-position:left top; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-center { width:36px; height:36px; background-position:center top; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-right { width:36px; height:36px; background-position:right top; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-left { width:36px; height:36px; background-position:center left; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-right { width:36px; height:36px; background-position:center right; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-left { width:36px; height:36px; background-position:left bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-center { width:36px; height:36px; background-position:center bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-right { width:36px; height:36px; background-position:right bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
</style>
<table class="table-wrapper">
<tr><td class="top-left"></td><td class="top-center"></td><td class="top-right"></td></tr>
<tr><td class="middle-left"></td><td class="">
<div style="width:400px; height:200px;">This is my DIV content!</div>
</td><td class="middle-right"></td></tr>
<tr><td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-right"></td></tr>
</table>
ASKER
@Proculopsis: That will cause a problem when I resize the div.
ASKER
@rikin_shah: I want the image to fit the div on any size.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@Proculopsis: Thanks! it work great, the ony thing that I have now is when I make the div very large, it cause a problem.
Check the following code:
Any suggestions?
Check the following code:
<style>
.table-wrapper { border-collapse:collapse; }
.top-left { width:36px; height:36px; background-position:left top; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-center { width:36px; height:36px; background-position:center top; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.top-right { width:36px; height:36px; background-position:right top; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-left { width:36px; height:36px; background-position:center left; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.middle-right { width:36px; height:36px; background-position:center right; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-left { width:36px; height:36px; background-position:left bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-center { width:36px; height:36px; background-position:center bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
.bottom-right { width:36px; height:36px; background-position:right bottom; background-image:url( 'http://filedb.experts-exchange.com/incoming/2011/03_w13/t435327/border.png' ); background-repeat:no-repeat; }
</style>
<table class="table-wrapper">
<tr><td class="top-left"></td><td class="top-center"></td><td class="top-center"></td><td class="top-right"></td></tr>
<tr><td class="middle-left"></td><td colspan="2" rowspan="2">
<div style="width:832px; height:518px;">This is my DIV content!</div>
</td><td class="middle-right"></td></tr>
<tr><td class="middle-left"></td><td class="middle-right"></td></tr>
<tr><td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-center"></td><td class="bottom-right"></td></tr>
</table>
Any suggestions?
ASKER
@Proculopsis: I have checked the code in Chrome, unfortunately, it doesn't work on Chrome, works great on IE8.
How can I get it to work in all browsers?
How can I get it to work in all browsers?
ASKER
@Proculopsis: I want the div to resize according to its contents, I need to remove "width:832px; height:518px;" from the following line to make the div fit its contents:
<div style="width:832px; height:518px;">This is my DIV content!</div>
When I do that it cause a problem only in Chrome (works great in Firefox and IE8)
What I need now is to make the div resize according to its contents without any problem in Chrome.
<div style="width:832px; height:518px;">This is my DIV content!</div>
When I do that it cause a problem only in Chrome (works great in Firefox and IE8)
What I need now is to make the div resize according to its contents without any problem in Chrome.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks alot,
http://www.ssi-developer.net/css/visual-filters.shtml
and rounded corners
http://www.cvwdesign.com/txp/article/35/rounded-corners-with-css-2