Question

I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are background properties on img tags. I did this so I could simulate a rollover effect following instructions from here.

Now, is there a way to add the inner border, as in the first button, to the other three using CSS?

Fiddle here.

Answer 1

According to the box model, padding is between the content and border. You should be able to style the images like:

 .img-btn {
     background: #FFF; // inner border color
     padding: 2px; // inner border width
     border: 2px solid #[yourgreen]; // outer border
 }

You shouldn’t need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:

.img-btn {
    background: #FFF url('your.img') no-repeat;
    padding: 2px;
    border: 2px solid #[yourgreen];
    width: [image width];
    height: [image height];
    background-position: center center;
}

Here’s a DEMO of double-border as described above.