Bordas personalizadas responsivas com CSS background-repeat

Relembre background-repeat e saiba como atingir o inimaginável com essa propriedade: bordas personalizadas responsivas!

Ir para o artigo

Há muitos anos, devs pelo mundo todo sonham em ter à disposição maneira menos complicadas de fazer bordas personalizadas com CSS.

Mesmo antes do CSS geração Alpha, já era possível conseguir bordas personalizadas, mas a duras penas. Hoje em dia, existem maneiras muito mais acessíveis de se conseguir o resultado e, surpreendentemente, uma dessas maneiras é usando propriedades de background!

Sim, através de uma dobradinha com background-size e background-repeat, é possível conseguir bordas personalizadas. Melhor ainda: é possível conseguir bordas personalizadas responsivas!

2 valores pouco usados de background-repeat

É bastante comum usarmos background-repeat no dia-a-dia da codificação CSS, mas a maioria não usa lém dos valores mais comuns, como no-repeat, repeat-x ou repeat-y.

Existem outros valores possíveis, inclusive aqueles que possibilitam fazer bordas personalizadas responsivas com CSS: space e round.

background-repeat: space

Ao usar o valor space para a propriedade background-repeat, é criada uma repetição da imagem em formato “tile”, de modo que não haja cortes na imagem e, sempre que houver espaço, mais dela preencherão o background.

Bordas personalizadas responsivas com CSS: mostrando o que acontece quando se usa background-repeat: space.
Perceba, à direita, que não há “cortes” na repetição da imagem.

Em combinação com a propriedade background-size, é possível se chegar a efeitos interessantíssimos. Por exemplo, neste comparativo, consta background-size: 200px.

Dessa maneira, é possível controlar com mais precisão o efeito “tile” alcançado, personalizando-o conforme a imagem e o efeito visual que se quer alcançar.

background-repeat: round

O efeito é o mesmo que quando se usa space, com a diferença que, ao invés de espaçar o “tile” para acomodar as repetições, cada uma delas pode ser redimensionada para fazer caber a imagem no espaço do background.

Bordas personalizadas responsivas com CSS: mostrando o que acontece quando se usa background-repeat: round.
Veja como cada repetição foi redimensionada para não haver “cortes”.

Dependendo da imagem usada para a repetição no background (e da possível combinação com background-size), é recomendado usar space ou round, a depender dos efeitos visuais pretendidos.

Bordas personalizadas responsivas

Depois de recapitular sobre esses 2 valores menos usuais de background-repeat, já é possível explicar como funciona a técnica para fazer a borda personalizada responsiva com CSS.

Já abrindo o jogo: trata-se de uma gambeta. 🙃

A técnica consiste em customizar um elemento qualquer com algum desses valores de background-repeat, criando um elemento-filho que não vai ocupar toda a extensão do ancestral, dando a impressão que se trata de uma borda.

Já que space ou round não permitem que haja “cortes” no tile que se forma, é como se a “borda” se adaptasse ao tamanho do elemento, adicionando ou removendo repetições da imagem conforme necessário.

Para um exemplo mais didático, considere esta estrutura HTML:

O elemento-pai, c-box, receberá a aplicação da técnica de background; o elemento-filho conterá o conteúdo, ocupando pouco menos que as dimensões totais do ancestral, dando a impressão de borda.

Confira (o elemento conta com um handle em baixo e à direita para não precisar ficar redimensionando a viewport):

See the Pen Bordas responsivas com background-repeat by dpw (@desenvolvweb) on CodePen.

Conclusão

Alguns poderiam alegar que também é possível conseguir efeito similar (com até mais possibilidades) usando border-image. Para estes, só temos uma coisa a dizer: vocês estão certos.

Entretanto, para atingir o potencial de border-image, é preciso uma preparação anterior maior, chegando até ser necessário mexer com programas de edição de imagem.

A técnica mostrada para conseguir bordas personalizadas responsivas é bastante simples de entender e de aplicar, sendo suficiente para necessidades básicas de bordas personalizadas (que, convenhamos, são a maioria).

E você, já conhecia essa técnica de bordas personalizadas responsivas? Pretende usar em algum projeto? Conta pra gente aí nos comentários!