Image Border not aligning properly

Question

I have an image, which I am trying to create a border around it, to make it look nicer. I have sliced an image, to have an image for top right, top, top left, right, left, bottom right, bottom left and bottom..

The border is all fine, except for the corners, can any body help me out here? I think Im missing some CSS. The image appears to be sliced fine - but Im open to suggestions.

Thanks and kind regards

This is the HTML

<table cellspacing="0" cellpadding="0"  border="0">
                    <tr>
                        <td >
                             <img alt="Corner" src="graphics/bgTopLeft.PNG" width="15px" height="13px" /></td>
                        <td class="AdminBoxTitleMainTop" >
                            </td>
                         <td>
                           <img  alt="Corner" src="graphics/bgTopRight.PNG"  /> </td>
                    </tr>
                    <tr>
                        <td class="AdminBoxTitleMainLeft">
                           </td>
                        <td> <img id="afMgrPhoto" alt="Affiliate Manager" src='#' runat="server" />
                        </td>
                        <td class="AdminBoxTitleMainRight">
                           </td>
                    </tr>
                    <tr>
                        <td>
                           <img alt="Corner" src="graphics/bgBottomLeft.PNG" /> </td>
                         <td class="AdminBoxTitleMainBottom">
                            </td>
                       <td >
                           <img alt="Corner" src="graphics/bgBottomRight.PNG" /> </td>
                    </tr>
                </table>

This is the CSS

.AdminBoxTitleMainTop {
    background-image: url(../graphics/bgTop.PNG);
    background-repeat: repeat-x;
    height: 17px;
}

.AdminBoxTitleMainBottom {
    background-image: url(../graphics/bgBottom.PNG);
    background-repeat: repeat-x;
    height: 17px;
}

.AdminBoxTitleMainRight {
    background-image: url(../graphics/bgRight.PNG);
    background-repeat: repeat-y;
    height: 17px;
}

.AdminBoxTitleMainLeft {
    background-image: url(../graphics/bgLeft.PNG);
    background-repeat: repeat-y;
    height: 17px;
}

Answer 1

You can try setting the width property for the rightmost and the leftmost cells (td elements). I guess you are trying to give a border using supplementary images which is not the best practice in HTML unless you're doing some rounded corner stuff. But if you don't want rounded corners. You can just use an IMG element and give a border (event with some padding) to make it look nice (and fewer HTML codes, which is nicer.)

<img style="padding: 5px; border: solid 1px #dedede" src="img.png" alt="" />

You can event shift the border color for the mouseover event of the image (works only if you place the img element inside element) without any javascript.

<a href='#'><img src="img.png" alt="" /></a>

Style:

a img
{
    border: solid 1px #dedede;
    padding: 5px; 
}

a:hover img
{
    border-color: #069;
}