White lines under border

Question

After adding to my CCS "#x img" my images lost their normal resolution and now they have "white lines" in either top/bottom/left or right.

to see it better zoom in and look on the picture on the left. Every picture has this problem and i have no idea how to fix it.. tried with changing height/width/swapping properties to 0.5/50%, 0 and still nothing. Tried aswell to change resolution of one of my pics to bigger to see if it will fill this white spots, but it didn't. Any ideas?

#classic img {
background-image: linear-gradient(black, black);
border-radius: 75px;
height: 100%;
width: 100%;

http://jsfiddle.net/3dytbr3m/4/ To be more precised. Check the first box in "result". Didn't add other lines of code to jsfiddle but the first one to show what/where exactly is the problem.

Answer 1

Add box-sizing: border-box to all divs in .option.

$(document).ready(function() {
  $('#classic').mouseenter(function() {
    $('#classic img').stop().fadeTo('slow', 0.25, function() {
      if (!$('#classic span').length) // make it so we don't keep appending more text
      {
        $('#classic').append("<span>Classic</span>");
        $("#classic span").fadeTo('slow', 1);
      }
    });
  });

  $('#classic').mouseleave(function() {
    $('#classic img').stop().fadeTo('slow', 1, function() {
      $('#classic span').fadeTo('slow', 0, function() {
        $(this).remove();
      });
    });
  });
});

body {
  background-color: black;
  font-family: 'Lato', sans-serif;
}
#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#logo {
  background-image: url("img/wowlogo.png");
  background-image-repeat: once;
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  height: 208px;
  width: 475px;
}
#menu {
  margin-top: 200px;
  text-align: center;
  font-size: 40px;
  letter-spacing: 2px;
  height: 90px;
  background-image: url("img/bg.png");
  background-color: #2E2E2E;
  border-radius: 60px;
}
.option {
  float: left;
  text-align: center;
  font-size: 30px;
  padding-left: 75px;
  padding-right: 10px;
  letter-spacing: 2px;
}
#classic {
  float: left;
  color: #FFFDD0;
  font-weight: 900;
  height: 37px;
  width: 150px;
  border-radius: 75px;
  border: 2px solid #000000;
  cursor: pointer;
}
#classic img {
  background-image: linear-gradient(black, black);
  border-radius: 75px;
  height: 100%;
  width: 100%;
}
#classic span {
  opacity: 0;
  position: relative;
  top: -110%;
}
#tbc {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/100/37");
  height: 37px;
  width: 100px;
  border-radius: 50px;
  border: 2px solid #003B04;
  cursor: pointer;
  color: #003B04;
}
#wotlk {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/150/37");
  height: 37px;
  width: 150px;
  border-radius: 75px;
  border: 2px solid #368BC1;
  cursor: pointer;
  color: #368BC1;
}
#cataclysm {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/190/37");
  height: 37px;
  width: 190px;
  border-radius: 95px;
  border: 2px solid #9C2A00;
  cursor: pointer;
  color: #9C2A00;
}
#mop {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/95/37");
  height: 37px;
  width: 95px;
  border-radius: 50px;
  border: 2px solid #00C99A;
  cursor: pointer;
  color: #00C99A;
}
#wod {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/110/37");
  height: 37px;
  width: 110px;
  border-radius: 55px;
  border: 2px solid #003B04;
  cursor: pointer;
  color: #003B04;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div id="logo"></div>
  <div id="menu">Lore
    <br />
    <div class="option">
      <div id="classic"></div>
      <div id="tbc"></div>
      <div id="wotlk"></div>
      <div id="cataclysm"></div>
      <div id="mop"></div>
      <div id="wod"></div>
    </div>
  </div>
</div>