Зазор между границей и изображением при добавлении граничного радиуса

У меня есть изображение с радиусом границы 50% и границей 3px вокруг него. Моя проблема заключается в том, когда задан радиус границы, между изображением и границей имеется 1px-промежуток.

Проблема показана на рисунке ниже.

enter image description here

И css, который я использую,

img {
    border: 3px solid #4CB7AC;
    height: 46px;
    width: 46px;
    border-radius:50%;
}

Обратите внимание, что

  • Размер изображения - 46 пикселей x 46 пикселей. Не изменяется.
  • И я должен использовать <img> для получения изображения. Исключить его как фоновое изображение.
  • Решение должно быть совместимо со всеми браузерами. Даже IE8.

Есть ли способ удалить этот пробел?

ИЗМЕНИТЬ  ссылка JS Fiddle

Ответы

Ответ 1

Просто добавьте Background color так же, как ваш цвет границы, и он исправлен.

См. jsFiddle

Ответ 2

Предложение background-color отлично работает, но если вы находитесь в ситуации, когда цвет фона будет менее идеальным (например, изображение PNG с прозрачностью), вы можете использовать background-clip: border-box;

Подробнее об этом свойстве см. background-clip на MDN.

Ответ 3

Попробуйте сделать это следующим образом:

img {
    border: 3px solid #4CB7AC;
    height: 46px;
    width: 46px;
    -webkit-border-radius: 46px 46px 46px 46px;
    border-radius: 46px 46px 46px 46px;
}

Кроме того, для IE8 и ниже попробуйте использовать условные комментарии, чтобы заменить радиус границы и добавить общее .png изображение

    <!--[if lte IE 8]>
Image source 
 <![endif]-->

UPDATE

Этот GAP, который вы видите, является "ошибкой" использования радиуса границы, вы также можете попробовать его исправить, добавив цвет фона изображения так же, как цвет рамки:

img {
        border: 3px solid #4CB7AC;
        height: 46px;
        width: 46px;
        -webkit-border-radius: 46px 46px 46px 46px;
        border-radius: 46px 46px 46px 46px;
        overflow: hidden;
        background-color: #4CB7AC;
    }