Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

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
0
Mohamed Abowarda
Asked:
Mohamed Abowarda
  • 7
  • 3
  • 2
  • +1
2 Solutions
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
http://www.w3.org/Style/Examples/007/roundshadow.en.html

this is better explained with both points...
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@rikin_shah: How can I do that by using the image itself?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
ProculopsisCommented:

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>

Open in new window

0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
write a css for making the background of div with same image. and per attached image in red color you can create a table with some spacing from all directions.

add the contents and done!!

 border
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@Proculopsis: That will cause a problem when I resize the div.
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@rikin_shah: I want the image to fit the div on any size.
0
 
ProculopsisCommented:

Resizing should be fine, here some colspan and rowspan is used to allow sizes larger than the original:

<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:600px; height:400px;">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>

Open in new window

0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@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:
 
<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>

Open in new window


Any suggestions?
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@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?
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@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.
0
 
MINORITYmaNCommented:
tha table solution is not standard w3c compilant because there are no surounding  tr & td for the div.
i just use divs instead of tables: check my example:
ps: the corners pixel went about 1 pixel to the left because i didnt cut it correctly out to 30x30 px, now the rorner have 30x31px.
if you cut your out, just watch to make all of them do 30x30px
<style>
.top-left {
	background-position:top left;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAACXBIWXMAAAsSAAALEgHS3X78AAABzElEQVRIibWVP0pDQRDGZ5MXxEILG48gHkCwF8k5tBJvYhHxFJYWYiNELKwEKyMIVhKiRBQhKmhkdtZiYRxn/72EOMUymRd+8+03kxfjnIN/i2qGrFDobOgpA6ahF83kL0xAz0PDp865Mr0+1OeyUqCn0KrunOOK7JGk1+FKUHgm6VG04oZiwyRCj84nxZViiUg1m2Cq6u5RLkdceziuUGaeK6OaAq1yDiLK0Wuio1x/D9WjvO91lEquPCsJUnkRTUSceO0cvlhrZzJopddaKx8l9z1jsaJzxVqrilVoS6aHAnFirQUAzvkS8X2XJ/fgMUqNkkVEiCjrufdMxmtG+OB7yCj4rqaqxqhYTEdELiZ/q8oNSZdQZgEAIvqPXIxrD9sUezAdEQcvH2e94d3jexVK5oSFR+3mxBOZfnI1OLocfCNB8d8jFM4Lw9f3UGPM1/i7c3zb648AYGNtpbPbjmxkZtPlSP3JRhtjDi/ue/3R8tJC92CbnGk1G8n3TL6HtMg3eHj97F4PAeB0f4ucWZxvAUAjbwv83UhuoNYREc9vnshBe33VmIZHa3pmVaL+yDbe7r2dzbnqlxnRnplqCOX8+W0MAMaYuVaTOT9nNGYHizZP9QAAAABJRU5ErkJggg==);
}
.top-center {
	background-position:top;
	background-repeat:repeat-x;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAIAAAB/DupQAAAACXBIWXMAAAsSAAALEgHS3X78AAAAXklEQVRIie3WywmAUAxE0URs2qZsygrcCPm/rbgfIZAUcAh3NZyZhLkN5BLRXlUNaVzrpnREDP0T7e4NaTMb+k2rKoru+bWINKR7BjnOC0QDxwLfD6o148YCMMjQn1utVElF0wViLgAAAABJRU5ErkJggg==);
}
.top-right {
	background-position:top right;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAJBSURBVEhLtVVNLwRBENUzO9lILBJuxFU4ORAJRxEXB0dnJ3H0PyT+gX/g5EhcETdOYolkI7shIvuRNR87q0bxtnT3jFmhDpPu3u33ql+/qlbdbnfg30LFcWyCK6X+hNGO/ld8qtPpACtPynn+0wOMoogm1j3ZQHloVBiGUgfeo+1MA/qRQPm+z+garknzCw7VbrexTSLKRYnbl4aq1WrJxDWC/BxWVof8zkFlJcc05RUuN56i9HLWoEOOZFAMQANE5sgmsPIl6BxIXB5FgspDsBE0RJOghw4aK5NMPL9EOrp2Ak0T4EqCjI7kUK1yyNyhFS42QyIpiCbOJzrBgSDPBeT1DHUCmXsah1UiKZRVn54y4JAELJHp0QxceSyHc9dOoNmUCeQdSEfCqWb6CTqgmaavOzBdLzk+0cEhoTXnoMpMv6ddcoIeBAGjy0NoHk1rQRl2pEM4GjQTWOvWtDzUz8odWcvcIUtaF8Ilmz0HZO5ZNHdRfn2qB2Ol4uhQ0XVd5yuoZdMQX3NKK+bDIl8Id2R2tfkW3dVap9e1RjucmSgRIN5CuR9j7JcDbZFfJPfh8mh7Y/G+Wr+tPJdrzXK1sTQ9LtGTy/k4AW+whvZTbztp5IcdP6L3IV7bPai9NDaXp9bnJz3PKxQK/EWQbjKgIdNDOqA7NCp67vCgRyIf72/R9PC8UnluZjQ1aR48iiiib50Aq0QQd9XKwnQQxSdXVa0hWx8sWahWUya5IzzX2dtZo+nNY0MaEV0srVNaE6fFd39uhhEZOQJxAAAAAElFTkSuQmCC);
}
.middle-left {
	background-position:0px;
	background-repeat:repeat-y;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAIAAABbkFLLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAABhSURBVEhLY/z37x8DA8N/MACyIeAvEvgDBr9h4NevX0AmkPwJBhBG5brHQEMuLizg42QFMuCACZlDdfao6biCdDRkRkOG1Ow2mmZG08xomiE1BEbTDKkhNlrOjKaZwZVmABkQRTkIgm3+AAAAAElFTkSuQmCC);
}
.middle-right {
	background-position:right;
	background-repeat:repeat-y;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAIAAABbkFLLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAABhSURBVEhLY/z//z8DEvj0/bd+/ASgQHuQLDs7OxsbG5CEMFhZWSEkBLCAATMSYIIBRjAAGsKEbDTV2aOm4wrS0ZAZDRlSs9tomhlNM6NphtQQGE0zpIbYaDkzmmYGV5oBAKLtCTbCocijAAAAAElFTkSuQmCC);
}
.bottom-left {
	background-position:bottom left;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAIvSURBVEhLrVQtTwNBFOy110tIwCEIqSZBoMEDwfMrUISEP4DtH0CCQ2DQJBAEEkOgCBxF8WUoorTHXXntlOH17d7SNDyxedfezbydmd2oN6hSqYRGKs9zWbMsk0ZKGtTXaKWD6na7su4dN5pv7evD7aQaTyUVQUOV2UkTRREfpXer/FPyF9rKoBbmZ+TD3f3TNMs14Ag6/iAHGnIIlgEFtNTq0lwSl8+v7stRr9VOPbO7g2tocHB2PXgcx7XZ6c3lmry/tnMg0gpBJ836n1N3V3roDulpgIgPG0RumCENHKmf3N0+vgvOxspifWu9P44XHd7CXo2OngTG589O9+jy4ezmKe+nZCAyA4PZZQUo8+PdATnABBo0zZePi8azbOK11RlB1+JMNj45oN4wM8ZShgc5KfKTiRRjUdVqFSvKk0hGpSj7TA4TKY0LnSTJUBmKbsRx1dc28Bi7Dfz3o8Nb7bCOEFOk7wnpRXST4EJ0xkZfPiajBktnFzeVB11H0wRUBwlHjPcdbz1KJ80vupHea4C2gUzaCfOjH51MRh9zSxPXgPIaHwu9KEjmxBGUp30EXYtjxg8QuLZzi3+jEzfgBKc2SobQ3SOmCcJkoLHoRpwAgQmunprEHvQwgdcPnm3e52jGQnfdxsfGEvfRj+6OTyw0GkjvxihZiF5E4O7DIOrHELo7Lwcv8oaK4c2/0QObCNCHXNUzBub1vqbHH2t2F8UoUDTNhOhj8v0bunf8b+JKM6VYKQ2UAAAAAElFTkSuQmCC);
}
.bottom-center {
	background-position:bottom;
	background-repeat:repeat-x;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAIAAAB/DupQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAACfSURBVEhL7dYhDgMhEIXh0pP0Ur1UL4JD4dahMKg1GAwCQUKyDQnZEBaa2vrfdQ7w5eWNmBFrrRszd4b9qn/6p1vxbh2qWzyeL4gG1yiklFBqoZSiaK01RW/bRtHGGIq21lK0c46i932naO89RYcQKDrGSNEpJYrOOVN0KYWij+Og6ForRbfWKPo8T4ruHTu7Ywwq9XVdFD3nhGjwWfgA9CJADzoY8N4AAAAASUVORK5CYII=);
}
.bottom-right {
	background-position:bottom right;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAIAAACQzIFuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAJpSURBVEhLnVY9axtBEPWu9eGAFTdJbIJIUgUCst0YUoYQgxvjwpDabtPGRf6Du5AQ0uV3iBDUGvwDjP+EiKwIfZzuznOMPHqa2VukbHGs7rRv3ryZeXcuz/O1h3U3nOyffV337vt5q1qt1mo1usqqVCq0pyutdVgelntYBElbL9DjJOVITx/X+SydEhBGkMOIwkCCgxtAn2Zffv6mZ7svtiyo8LMBEFqFmaHfDZM8z9pXN96tvW9tq9w5D+aOGSDrIH0/nKQE7V1+9PkX/ftwb+flswbBSQCU1YrDAcrou7//Rhc/2n+ub1mTi5M3jzbqVACpIUWiYrJWGFISCuY0i/rq4yXtahV/+rZ5fNDklqA7vMEOYWgutVxZK5UTF7bI6N2nb6+fNz7s7jSfbAocowtZLIPg2jrTHakEa+U6nQ5mLdyVFNKjiC5FFu4K3dthYcqRqZGmRFBRY6HfcSCt1kJZ9FUdqciqmVrgjl0R6Uhbw9JZFevgFsQASmsWRKkxqx7X0PiBD3qT6msKE+w8hEZNJEyBjjVUzRcfVPSysBPYecEhDNqLMsigO/LNgrt1FfRI5VyKrxUHk5gpg2+DIHcBFc9S5hX2d8QVleMBlC+WtWPxt263q3hh7so6RAdBVND6Z6/XwzOSbxlu5I1hk3D9fh+lLAq9aHVIE88HsMw0ucFgoPJVweJvHylmUH03Go3Q3rDD4t0WHE7VOW48Hlufs91W1hiRhilgkyRR2cXFXYbyHHA6nS5Tn5VA5+hpmgZfK3b24iIEZ9VlWRZ+UPLxFvEs+2j+pYfq/wfNMEX8Bl6J1zJ/vgflWWN09DgBGAAAAABJRU5ErkJggg==);
}
.box-outer { width:400px; }
.box-inner {
	padding:34px;
	height:300px;
}
</style>

<div class="box-outer">
	<div class="top-center">
	<div class="bottom-center">
	<div class="middle-left">
	<div class="middle-right">
	<div class="top-left">
	<div class="top-right">
	<div class="bottom-left">
	<div class="bottom-right">
		<div class="box-inner">This is my DIV content!</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
</div>

Open in new window

0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
Thanks alot,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 7
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now