как наложить border на картинку

Question

<html lang="en">

<head>
   <style>
      img {
         border-top: 100px solid green;
      }
   </style>
</head>

<body>
   <img src="https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg"
      alt="">

</body>

</html>

результат, который выходит

а мне нужно, чтобы border наложился на нее

нужный результат

я пробовал добавить через outline, но ничего не получилось

Answer 1

попробуйте outline, но к сожалению его нельзя задать на конкретную сторону. А border это граница и она не ляжет на картинку. Можно попробовать через тень. Или заморочиться блоком div с отрицательным margin.

Answer 2

В таком виде, как у вас в HTML, пожалуй никак. Но если обернуть изображение каким-нибудь <div>, то самым простым способом будет:

.wrap-image {
  border-top: 100px solid green;
  display: inline-block;
  overflow: hidden;
}
img {
  margin-top: -100px;
}

<div class="wrap-image">
  <img src="https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg"  alt="">
</div>

UPD: запоздалая мысль вдогонку (. Гораздо эффектнее и правильнее было бы обернуть <img> при помощи <figure> что позволит нам в CSS избавиться от правила display: inline-block;

<figure class="wrap-image">
    <img src="https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg"  alt="">
</figure>

БЛОГ НА HUSL

как наложить border на картинку

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