Evitando que o Fundo Invada a Borda

Por padrão, a propriedade background-clip assume o valor border-box. Isso significa que a cor ou imagem de fundo se estende por toda a área da borda. Para restringir o fundo à área de preenchimento (padding), utilize o valor padding-box.

.elemento {
    background-clip: padding-box;
}

As opções de valor para background-clip são content-box, padding-box, border-box e text.

Criando Bordas Múltiplas

Usando Sombra (box-shadow)

A propriedade box-shadow permite simular bordas extras sem alterar o fluxo do layout. Um ponto importante é que ela não afeta o tamanho do elemento nem interações do mouse.

.elemento {
    background: #3a86a8;
    box-shadow: 0 0 0 8px #2a6d8b, 0 0 0 12px #47a0c5;
}

Para projetar a sombra para dentro do elemento, utilize a palavra-chave inset.

.elemento-interno {
    background: #3a86a8;
    box-shadow: inset 0 0 0 5px #47a0c5, inset 0 0 0 12px #2a6d8b;
}

Combinando Borda e Contorno (outline)

A combinação de border e outline é outra abordagem para bordas duplas. O outline suporta estilos tracejados e pode ser deslocado com outline-offset. Versões modernas dos navegadores já suportam outline em elementos com cantos arredondados.

.elemento-dupla-borda {
    background: #3a86a8;
    border: 8px solid #2a6d8b;
    outline: 4px dashed #47a0c5;
}

Posicionamento Preciso do Fundo

Quando se deseja posicionar o fundo relativo a um lado específico do elemento, dentro da área de conteúdo, existem algumas técnicas.

Posicionamento por Palavras-chave

.caixa {
    padding-right: 20px;
    padding-bottom: 10px;
    background-position: right 20px bottom 10px;
}

Origem do Fundo (background-origin)

Alterar a origem do fundo para content-box faz com que o posicionamento seja sempre relativo à caixa de conteúdo, independentemente do preenchimento.

.caixa {
    background-origin: content-box;
}

Usando a Função calc()

.caixa {
    background-position: calc(100% - 20px) calc(100% - 10px);
}

Cantos Arredondados com Contorno Interno

Para criar um efeito de contorno (outline) que respeite os cantos arredondados (border-radius), podemos combinar outline com box-shadow. A expansão da sombra deve ser suficiente para cobrir o espaço entre o contorno e o arredondamento.

.elemento-arredondado {
    background: #d2b48c;
    border-radius: 0.8em;
    outline: 0.4em solid #111;
    box-shadow: 0 0 0 0.35em #111;
}

Fundos Listrados

Listras Horizontais

.listra-horizontal {
    background-image: linear-gradient(#ff5555 50%, #ffcc00 80%);
}

Listras Verticais

.listra-vertical {
    background-image: linear-gradient(90deg, #ff5555 50%, #ffcc00 80%);
}

Listras Diagonais

.listra-diagonal {
    background-image: linear-gradient(60deg, #ff5555 20%, #ffcc00 50%, #228b22 90%);
    background-size: 30px 100%;
}

Padrão Repetitivo de Listras Diagonais

Para listras diagonais que se repetem de forma contínua, use repeating-linear-gradient.

.listra-repetida {
    background-image: repeating-linear-gradient(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);
}

O valor 0 é interpretado como o valor de parada do seletor de cor anterior, simplificando o código.

Padrões Monocromáticos

Crie variações sutis de uma mesma cor usando camadas de gradiente com transparência.

.padrao-monocromatico {
    background: #58a;
    background-image: repeating-linear-gradient(30deg, transparent 0, transparent 15px, hsla(0, 0%, 100%, 0.1) 0, hsla(0, 0%, 100%, 0.1) 30px);
}

Padrões de Fundo Complexos

Grade (Grid)

.grade {
    background-color: #d2b48c;
    background-image:
        linear-gradient(white 1px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
    background-size: 30px 30px;
}

Pontos (Polka Dots)

.pontos {
    background-color: #655;
    background-image:
        radial-gradient(#d2b48c 30%, transparent 0),
        radial-gradient(#d2b48c 30%, transparent 0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

Xadrez (Checkerboard)

.xadrez {
    background-color: white;
    background-image:
        linear-gradient(45deg, black 25%, transparent 0, transparent 75%, black 0),
        linear-gradient(45deg, black 25%, transparent 0, transparent 75%, black 0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

Fundos Pseudo-Aleatórios

Utilize tamanhos de fundo com números primos para criar padrões que parecem aleatórios e não se repetem de forma óbvia.

.padrao-aleatorio {
    background-color: hsl(20, 40%, 90%);
    background-image:
        linear-gradient(90deg, #fb3 10px, transparent 0),
        linear-gradient(90deg, #ab4 20px, transparent 0),
        linear-gradient(90deg, #655 20px, transparent 0);
    background-size: 41px 100%, 61px 100%, 83px 100%;
}

Bordas com Imagem Contínua

Borda Imagem Adaptável

Crie o efeito de uma borda com imagem usando camadas de fundo. A camada inferior (com a imagem) é dimensionada para preencher toda a área, incluindo a borda.

.borda-imagem {
    border: 5px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        url('imagem.jpg') border-box center / cover;
}

Envelope Clássico

Simule listras diagonais decorativas como borda usando um gradiente repetitivo.

.envelope {
    border: 5px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, blue 0, blue 37.5%, transparent 0, transparent 50%) 0 / 1em 1em;
}

Efeito Formiga Marchando (Marching Ants)

Uma técnica popular para seleções ou bordas ativas.

.formiga {
    border: 1px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / 0.6em 0.6em;
    animation: marcha 12s linear infinite;
}

@keyframes marcha {
    to {
        background-position: 100%;
    }
}