Граница изображения не выравнивается должным образом

Question

У меня есть изображение, которое я пытаюсь создать вокруг него, чтобы оно выглядело лучше. Я нарезал изображение, чтобы иметь изображение для верхнего правого, верхнего, верхнего левого, правого, левого, нижнего правого, нижнего левого и нижнего ..

С границей все в порядке, кроме углов, может ли какое-нибудь тело помочь мне здесь? Я думаю, что мне не хватает CSS. Изображение выглядит хорошо нарезанным, но я открыт для предложений.

Спасибо и всего наилучшего

Это 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>

Это 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

Вы можете попробовать установить свойство ширины для самой правой и самой левой ячеек (элементы td). Я предполагаю, что вы пытаетесь задать границу с помощью дополнительных изображений, что не является наилучшей практикой в ​​HTML, если вы не делаете некоторые закругленные углы. Но если вы не хотите закругленные углы. Вы можете просто использовать элемент IMG и задать границу (событие с некоторыми отступами), чтобы он выглядел хорошо (и меньше HTML-кодов, что лучше.)

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

Вы можете изменить цвет границы события наведения мыши на изображение (работает, только если вы поместите элемент img внутри элемента) без использования JavaScript.

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

Стиль:

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

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