при увеличении изображения на фоне появляется пробел

Question

У меня есть дизайн с множеством круглых границ, и я должен кодировать с помощью CSS2.1. Итак, я закодировал div, давая им фоны с размерами. Дизайн выглядит нормально, когда окно браузера находится в нормальном состоянии, но когда я увеличиваю изображение, между делениями появляется разрыв примерно в 2 пикселя. Проблема возникает в Chrome и Safari.

Что я могу сделать, чтобы предотвратить разрыв?

Вот пример кода:

<div id="bigImage">
 <div id="leftRoundCorner"></div>
 <div id="middlePart"></div>
 <div id="rightRoundCorner"></div>
</div>

#bigImage
{
  height:20px;
  width:20px;
}
#leftRoundCorner
{
  height:20px;
  width:5px;
  float:left;
}
#middlePart
{
  height:20px;
  width:10px;
  float:left;
}
#rightRoundCorner
{
  height:20px;
  width:5px;
  float:right;
}

Answer 1

Используйте CSS3 для любых закругленных углов, чтобы он выглядел хорошо увеличенным!

-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

и все готово!