HTML Buttons Line Problem

[SoAdCrAzY]

I am making a website and have found a problem:

I am new to HTML and am wondering what I can do to get rid of the black lines in between the navigation buttons. Here is my HTML code:

<div class="navigationBar"> 
             
  <a href="home.html"><img src="Images/home.png" width="138" height="41" alt="Home">
   
  <a href="residents.html"><img src="Images/residents.png" width="138" height="41" alt="The Residents">
  
  <a href="farm.html"><img src="Images/farm.png" width="138" height="41" alt="Farm">
  
  <a href="contact.html"><img src="Images/contact.png" width="138" height="41" alt="Contact">
  
</div>

Here is my CSS code:

.navigationBar
{
    text-align: center;
    padding: 10px;
}

Thank you.

 

[SoAdCrAzY]

You need to close your anchor tags.

Ah thank you, I knew it would be simple.

 

[SoAdCrAzY]

It would also be better performance-wise not to use images for those links - you could get pretty close with just CSS.

http://css3button.net/

Thank you. I'll look into that.

[EDIT] Thanks, it is so much simpler using CSS if I ever have to make any changes.