The components that make up the Box Borders are all found under the GP Control Panel -> Styles & Colors -> Box Border Images.

They are (forgive my attempt at textually drawing a box here):

Top Left Corner	Top Left Content Area1	Top Background2	Top Right Corner
Left Side Top3			Right Side Top4
Left Side Background			Right Side Background
Bottom Left Corner	Bottom Background5		Bottom Right Corner

1. This is where the box title is displayed
2. This is the graphic that is multiplied to fill out the top middle
3. This is used if you want to add a little something extra but if your not getting fancy use the same graphic as Left Side Background
4. This is used if you want to add a little something extra but if your not getting fancy use the same graphic as Right Side Background
5. This is the graphic that is multiplied to fill out the bottom middle

A small box would look something like:

Top Left Corner	Top Left Content Area1	Top Background2	Top Background2	Top Right Corner
Left Side Top3				Right Side Top4
Left Side Background				Right Side Background
Left Side Background				Right Side Background
Bottom Left Corner	Bottom Background5	Bottom Background5	Bottom Background5	Bottom Right Corner

I did not see any effect of adding or leaving the Top Right Fader empty. At worst, just use the same graphic as Right Side Top.

NOTE:  I would not make the edge background pics too tall (use something like 2 pixels up to say 10 pixels).  I would also not make the middle background pics too wide (use something like 2 pixels up to say 10 pixels).  This is because the code will replicate the number it needs to fill out a box's dimensions based up on the box content's width/height.

NOTE 2:  The top pics all need to be the same height.  The left pics all need to be the same width.  The right pics all need to be the same width.  The bottom pics all need to be the same height.  The Top Left Content Area must be at least 159 pixels wide -- any thinner & you will see white space/background fill; it can be wider but I wouldn't make it too much wider.

NOTE 3:  Make sure the inside edge of each of the graphics is in alignment with their adjoining pic (respectively).  That part threw me off for about 2 days -- I'm not the most graphic or artistically aware person.  I just couldn't figure out why the bits weren't aligning properly & why there was just a sliver of white space where the edges met; or why the corner graphics were sticking/jutting way out from the edge graphics (or vice versa).

Enjoy!

- Neutrio
Heroes Inc

Thx Neutrio,

This does go someway towards helping me out, though I cannot use the Guild Portal Control panel section of the Box Border Images as I have a Custom Stylesheet enabled (I realise I am making thimgs harder form myself this way lol, but thats me )

So my question is still what order are these coded in  the css file and are any otpional etc.

My site is here Fruit Loops and I am not happy with the sides of the boxes basically.  I have arrived at this point almost by accident and luck hacking at code and playing with paintshop pro.  in my css file I am using a lot of the same graphics in places, but not sure where I need to put the lines to achieve the box properly.  This is my current box css

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
    <tr>
      <td width="5" bgcolor="#333333" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg" height="28">&nbsp;</td>
      <td width="100%" bgcolor="#333333" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin.jpg" height="28" Align="Center" class="ContentBoxTitleNobackground">
      $block[title]</td>
      <td width="5" bgcolor="#333333" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg" height="28">
      <p align="center">&nbsp;</td>
    </tr>
    <tr>
      <td width="5" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg">&nbsp;</td>
      <td width="100%" class="ContentBoxBody">
      $block[content]</td>
      <td width="100%" background="http://markmoore.zoomshare.com/my_images/boxbordertopthin2.jpg">
      <p align="center">&nbsp;</td>
    </tr>
    <tr>
      <td background="http://markmoore.zoomshare.com/my_images/boxborderbottom2.jpg" colspan="3" height="13">
      <font size="1">&nbsp;</font></td>
    </tr>
  </table>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2">
    <tr>
      <td width="100%" height="5"><font size="1">&nbsp;</font></td>
    </tr>
  </table>

Thx Again Neutrio,

I think you are probably right about my CSS efforts, but it came about as a result of a conversation I had with a friend who was going on about the wonders of CSS.  Despite being in IT for over 20 years now I had never touched anything to do with web authoring.  But I do have a sad desire with IT to want to know "how" and "why" stuff works, so I have thrown myself in at the deep end.  Your contributions have been helpful thank you and added a few more pieces to the puzzle, so I will carry on trawling through.

It does that to me too ... suspect that this is because CSS is enabled -- which I want for my site -- so this is either by design or a d'oh! in the code.