CSS Navigation image background

Question

Im making template for wordpress and I can't solve this problem:

I have my style for navigations:

<style>
body {
 background: #FFFBD0;
}

/* Navigation */
ul {
 list-style-type:none;
 margin:0;
 padding:0;
}

.menu-item
{
 padding: 22px 20px 22px 20px;
 background:url('images/button_brown.png') no-repeat;
 display:inline;
}

a {
 color: #FFFBD0;
 text-decoration:none;
}

</style>

and my navigations:

<div class="div-menu">
<ul id="menu" class="menu">
    <li class="menu-item"><a href="">Home</a></li> 
    <li class="menu-item"><a href="">Button 2</a></li>
    <li class="menu-item"><a href="">Button 3</a></li>
</ul>
</div>

now Im trying to style buttons like that:

http://tinypic.com/r/2lmxb42/8

Answer 1

You don't need to use an image background for this. You can do it with background-color and border. You set the a to have a border, dotted and white. Then you give that a the main padding. You then set the li which contains the a to have a very small bit of padding. Give the li a background-color and you are good to go.

Working Fiddle

Code

HTML:

<div class="div-menu">
    <ul id="menu" class="menu">
        <li class="menu-item"><a href="">Home</a></li> 
        <li class="menu-item"><a href="">Button 2</a></li>
        <li class="menu-item"><a href="">Button 3</a></li>
    </ul>
</div>

CSS:

/* Navigation */
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.menu-item {
    display:inline-block;
    background:rgb(64,18,20);
    padding:2px;
}

.menu-item a {
    display:block;
    padding: 22px 20px 22px 20px;
    color: #FFFBD0;
    text-decoration:none;
    border:dotted 1px white;
}

Goal:

Result:

Answer 2

Check this jsFIddle

HTML

<div class="div-menu">
    <ul id="menu" class="menu">
        <li class="menu-item"><a href="">Home</a></li> 
        <li class="menu-item"><a href="">Button 2</a></li>
        <li class="menu-item"><a href="">Button 3</a></li>
    </ul>
</div>

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.menu-item {
    display:inline-block;
    background:rgb(64,18,20);
    padding:2px;
}

.menu-item a {
    display:block;
    padding: 9px 24px 9px 24px;
    font-size:21px;
    color: #FFFBD0;
    text-decoration:none;
    border:dotted 1px white;
}