Question

I have a menu button. The main blue outline is meant to sit above the image but right now the blue border is behind the image.

Can you help me figure out what I need to do to get the image behind the blue border?

I cut the blue border into 2 sections, the top & the bottom. The bottom is a tall image, so that the border can grow/be large for tall images.

This is how the buttom is meant to look:

This is how it currently looks:

My Code:

<div class="buttonTop">
    <div class="buttonBottom">
        <img class="buttomImg" src="images/ButtonImages/sweets2.jpg" width="150px" height="105px" alt=""/>
    </div>
</div>

.buttonTop { 
    background: url(../images/dinnersButton.png) 0 top no-repeat; 
    padding-top: 73px; 
    display: block; 
    width: 153px; 
    height: 113px;
    margin: 0px auto; 
}

.buttonBottom { 
    background: url(../images/buttonBottomLite.png) 0 bottom no-repeat; 
    padding: 0px 2px 5px 2px; 
    display: block; 
    height: 109px;
    z-index: 2;
}

.buttomImg {
    z-index: 0;
}

Answer 1

<div class="round_border">
<img src="" alt="" />
</div>

--- CSS
.round_border {
padding: 5px;
border: 5px solid blue;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

That should work in most modern browsers.