O overflow CSS é um recurso usado para controlar o comportamento de elementos quando o conteúdo dentro deles excede os limites de seu tamanho definido. Ele pode ser usado para criar efeitos interessantes, como rolagem, ocultar conteúdo ou exibir um efeito de borda.

Existem três valores principais para o overflow: visible, hidden e scroll.

Visible

O valor visible é o padrão, o que significa que o conteúdo que excede os limites do elemento será visível.

<div style="overflow: visible; width: 200px; height: 200px;">
  Conteúdo que excede os limites do elemento
</div>

Hidden

O valor hidden significa que o conteúdo que excede os limites do elemento será ocultado.

<div style="overflow: hidden; width: 200px; height: 200px;">
  Conteúdo que excede os limites do elemento
</div>

Scroll

O valor scroll significa que o conteúdo que excede os limites do elemento será visível, mas haverá barras de rolagem para permitir que o usuário role para ver o conteúdo oculto.

<div style="overflow: scroll; width: 200px; height: 200px;">
  Conteúdo que excede os limites do elemento
</div>

Além dos três valores principais, existem outros valores que podem ser usados para controlar o comportamento do overflow. Por exemplo, o valor auto significa que o comportamento do overflow será determinado pelo navegador.

<div style="overflow: auto; width: 200px; height: 200px;">
  Conteúdo que excede os limites do elemento
</div>

O overflow também pode ser controlado para cada direção individualmente. Por exemplo, o valor overflow-x controla o comportamento do overflow na direção horizontal e o valor overflow-y controla o comportamento do overflow na direção vertical.

<div style="overflow-x: hidden; overflow-y: scroll; width: 200px; height: 200px;">
  Conteúdo que excede os limites do elemento
</div>