Как убать рамки при border radius у круга?

Question

[sergey90123]

https://codepen.io/sergey112/pen/bGpBKxq?__cf_chl_...
Появляются такие следы

width: 69px;
    height: 69px;
    margin: 0 auto;
    padding: 0;
    background: #F1F5FF;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;

Comments

[zkrvndm]

Задайте border-radius не в процентах, а в пикселях. Например, напишите 1000px

[sergey90123]

Надим Закиров,
ничего не изменилось почему то

[zkrvndm]

sergey90123, а если задать display: block?

[sergey90123]

Надим Закиров, не заработало

[zkrvndm]

sergey90123, хм, а если тоже самое делать с обычным div, а не применительно к img?

[sergey90123]

Надим Закиров, Добавил код пен. БЛок пробовал ставить как для img так и для родителя

[zkrvndm]

sergey90123, вам не нужно пытаться округлить изображение, тег img не рассчитан на такое.

Замените:

<img class="features__content-features-elem-image" />

На:

<div class="features__content-features-elem-image"></div>

Если при этом нужно внутри div показать изображение, то используйте background-image.

[quiplunar]

Надим Закиров,

вам не нужно пытаться округлить изображение, тег img не рассчитан на такое

- Серьезно? Можно где-то почитать об этом?

Например, напишите 1000px

- Я бы по рукам дал если увидел что кто-то так пишет, у вас все хорошо?

[zkrvndm]

quiplunar, я самоучка и все мои знание получены на практике. Сам я всегда пишу скругление в пикселях, так как в процентах получается хрень и скругляется не пойми как. Насчет img, черные края никак не убираются, значит не рассчитан, раз такие косяки при скруглении идут.

[quiplunar]

Надим Закиров,

Сам я всегда пишу скругление в пикселях, так как в процентах получается хрень и скругляется не пойми как.

- Для создания круга достаточно написать: border-radius: 50%; а не 100000000px для скругления.

Насчет img, черный края никак не убираются, значит не рассчитан, раз такие косяки при скруглении идут

- Прежде чем делать такие выводы, было бы не плохо разобраться в вопросе. И понять что это не косяк, а нормальное поведение браузера, почитайте ответы, люди уже дали их.

я самоучка и все мои знание получены на практике

- Тогда пишите так: я самоучка и все мои "знание" получены на практике. Будет правильнее))

Answer 1

[Юрий]

Если поменять на или любой другой элемент без дефолтных стилей, всё ок.

Проблема, судя по всему, из-за того, что браузер картинку без содержимого (с неправильным путём к файлу или вообще без него, как в данном случае) рисует как прямоугольник с бордером. Этот самый бордер и торчит у вас.
Если поменять на никак нельзя, можно либо выводить пустой PNG, либо добавить border: 1px solid transparent и соответственно скорректировать размеры элемента в пикселях.

Comments

[sergey90123]

Да, заработало

Answer 2

[Арсений Матыцин]

Это не бордер, это техническое отображение некорректно созданного изображения. Решение → правильно внести изображение (src + alt) или использовать div\span с фоновым изображением.

К слову, border-radius проще в таких штуках задавать через проценты. Т.е. 50%.

Answer 3

[Максим Калинин]

Скорее всего блок что у тебя родительский не такого же размера как дочерний.
Попробуй border: none вписать до border-radius.

htmlbook.ru/css/background-size

Comments

[sergey90123]

Не заработало , Родительский больше

[Максим Калинин]

sergey90123, просто поставь картинку через src и будет работать