# Bordas personalizadas responsivas com CSS background-repeat
> Crie bordas personalizadas e responsivas com CSS puro facilmente. Técnica surpreendente usando background-repeat: space e round para efeitos únicos. Incrível!
URL: https://dpw.dev/css/bordas-personalizadas-responsivas-com-css-background-repeat/
Publicado em: 2020-03-23
Categoria: css
Tags: interface, web-design-responsivo
Autor: Tárcio Zemel
[Vídeo no YouTube](https://www.youtube.com/watch?v=0ReyflOqNNw)
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.
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.
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_.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml