# Borda cinza vs semitransparente

> Compare uma borda cinza sólida com uma semitransparente sobre fundos diferentes e veja por que só a segunda acompanha a cor de trás.

URL: https://dpw.dev/ferramentas/borda-cinza-vs-semitransparente/

Escolha a cor e a opacidade da borda: a prévia põe lado a lado o cinza sólido e a borda semitransparente sobre quatro fundos, com a cor que cada uma mostra em cada um.

Esta página tem uma comparação interativa no navegador. Exemplo: a borda `rgb(0 0 0 / 15%)` e o cinza sólido que ela dá sobre o fundo branco, `rgb(217 217 217)`:

```css
.element {
  /* Sem isto, o fundo da caixa passa sob a borda e ela se mistura com ele. */
  background-clip: padding-box;
  /* Sobre o fundo branco, igual a rgb(217 217 217); nos outros fundos, acompanha a cor. */
  border: 1px solid rgb(0 0 0 / 15%);
}
```

| Fundo | Cinza sólido | Semitransparente |
| --- | --- | --- |
| Branco (`#ffffff`) | `rgb(217 217 217)` | `rgb(217 217 217)` |
| Areia (`#f3e9d2`) | `rgb(217 217 217)` | `rgb(207 198 179)` |
| Azul (`#2563eb`) | `rgb(217 217 217)` | `rgb(31 84 200)` |
| Escuro (`#18181b`) | `rgb(217 217 217)` | `rgb(20 20 23)` |

## O problema

O cinza da borda costuma ser escolhido sobre fundo branco: `rgb(217 217 217)` parece uma linha discreta. Quando o mesmo componente vai para um fundo bege, colorido ou escuro, aquele cinza continua igual e passa a parecer uma linha clara e fria, que não pertence ao fundo.

A saída comum é criar um cinza para cada fundo, e o número de tokens de borda cresce a cada tema novo.

## Como funciona

Uma borda semitransparente não tem cor própria: ela escurece (ou clareia) o que está atrás na mesma medida. A cor que aparece é calculada canal a canal:

`cor vista = borda × α + fundo × (1 − α)`

Com preto a 15% sobre o branco, cada canal dá `0 × 0,15 + 255 × 0,85 ≈ 217`: o mesmo `rgb(217 217 217)` do cinza sólido. Sobre o azul, a mesma borda dá um azul mais escuro.

Por padrão, o fundo de uma caixa se estende por baixo da borda (`background-clip: border-box`). Aí a borda semitransparente se mistura com o fundo da própria caixa, e não com o que está atrás dela. O `background-clip: padding-box` corta o fundo na borda e deixa a mistura acontecer com o fundo de fora.

Em fundo escuro, borda preta semitransparente quase some. Para temas escuros, a mesma ideia vale com branco: `rgb(255 255 255 / 15%)` clareia qualquer fundo escuro na mesma medida. Com uma borda clara, a prévia tira o cinza sólido do fundo escuro, já que sobre o branco nenhuma das duas apareceria.

## Quando usar

- Divisores e bordas de cards que aparecem sobre fundos diferentes.
- Componentes que vão para temas claros e escuros sem um cinza por tema.
- Bordas sobre imagem ou gradiente, em que nenhum cinza sólido combina com tudo.
- Reduzir a lista de tokens de borda a uma cor e uma opacidade.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/rgb)).

## Conceitos Fundamentais de CSS

Borda, padding e fundo são camadas da mesma caixa, e o `background-clip` decide até onde o fundo vai. O livro explica o modelo de caixa em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

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