====== overflow ======
  * visible - при переповненні вміст буде відображатися за межами блоку (за замовчуванням)
  * hidden - при переповненні ховає частину зображення що виходить за рамку
  * scroll - контент, що переповнює блок, буде прихований. Для перегляду прихованого контенту з'являться вертикальний і горизонтальний скролбари.
  * auto - при значенні auto показуються тільки ті скроллбари, які дійсно необхідні.


===== HTML =====
<code>
<div class="thumb">
  <img src="https://images.pexels.com/photos/33492/cat-red-cute-mackerel.jpg?auto=compress&cs=tinysrgb&h=480&w=640" alt="">
</div>
</code>
===== CSS =====
<code>
* {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
}

.thumb {
  border: 10px solid green;
  border-radius: 50px;
  width: 480px;

  overflow: hidden;
}
</code>

  * overflow-x
  * overflow-y
контролюють переповнення тільки у відповідній площині.