Borda de Transição pixelada

Olá, Lucas! Tudo bem?

Para criar uma borda de transição pixelada como a da imagem que você compartilhou, você pode utilizar o CSS. Uma forma de fazer isso é utilizando a propriedade border-image.

Você pode criar uma imagem com os pixels que deseja utilizar na borda e definir essa imagem como a borda da sua seção. Por exemplo:

section {
  border: 10px solid;
  border-image: url(caminho/para/a/imagem) 30 round;
}

Nesse exemplo, a imagem que será utilizada como borda tem um tamanho de 30 pixels e será repetida ao longo da borda. Você pode ajustar esses valores de acordo com o que deseja.

Espero ter ajudado e bons estudos!

Eu tentei esta solução de border-image porém nao ficou algo "natural", fluido... Será que pode ser a maneira como fiz a imagem ?

Entendi, deve funcionar com imagem de alta resolução talvez. Onde você pegou esse exemplo? Foi de algum site? Poderia compartilhar algum link ou algo assim.

Eu estou pesquisando formas de fazer isso.

Eu peguei deste video como exemplo: https://www.youtube.com/watch?v=rt8b0jz8GAY

Ó eu fiz dessa forma para te ajudar, eu cortei a imagem do video só da parte da borda pixelada e adicionei a imagem na borda, eu achei que ficou legal, só teria que melhorar a qualidade dessa imagem:

Link do site para ver como ficou: https://borda-pixelada.vercel.app/

Download do projeto: https://github.com/Renangenito/Borda-pixelada/archive/refs/heads/main.zip

Repositório do projeto:https://github.com/Renangenito/Borda-pixelada

Imagem do projeto:

Eu não encontrei nada pronto para isso, achei vários tutoriais porém só com imagem na borda mesmo.

https://portofoliosimplificado.vercel.app/

Eu tentei criar uma da minha maneira... acho que o caminho é mais ou menos por ai, o que acha ?

O seu ficou muito bom eu manteria assim :)