CSS. Свой стиль для border (убрать sepia)

Question

Можно ли, не трогая класс .circle_img, сохранить цвет у .img_border (чтобы на него не распространялась сепия)?

.circle_img img {
  height: 100px;
  width: auto;
  border-radius: 50%;
  filter: sepia(100%);
}

.img_border {
  border: 5px solid green;
}

<div class="circle_img">
  <img src="https://i.imgur.com/buzfQTm.png" class="img_border" alt="">
</div>

Answer 1

Ну это же очевидно - фильтр только для картинки, а бордер для обертки.

.circle_img {
  border: 5px solid green;
  width: fit-content;
  border-radius: 50%;
}

.circle_img img {
  display: block;
  height: 100px;
  width: auto;
  filter: sepia(100%);
}

.img_border {}

<div class="circle_img">
  <img src="https://i.imgur.com/buzfQTm.png" class="img_border" alt="">
</div>

БЛОГ НА HUSL

CSS. Свой стиль для border (убрать sepia)

Ответы (1 шт):