6XC

Gerador de Borda CSS

Desenhe uma borda visualmente — espessura, estilo (solid, dashed, dotted, double…), cor e raio — com pré-visualização em tempo real.

672 visualizações

A propriedade border

Forma abreviada: border: espessura estilo cor, por exemplo border: 2px dashed #5b3df5. Os estilos incluem solid, dashed, dotted, double, groove, ridge, inset e outset. Combine com border-radius para molduras arredondadas, ou aplique o estilo em um só lado (border-top, …) para detalhes como o sublinhado de uma aba.

Perguntas Frequentes

Por que minha borda muda o tamanho do elemento?

Por padrão as bordas são somadas às dimensões da caixa. Ative box-sizing: border-box para que largura e altura incluam a borda — o padrão moderno adotado pela maioria dos resets.

Qual espessura mínima a borda precisa ter para o estilo double aparecer?

O estilo double exige pelo menos 3px — duas linhas mais o espaço entre elas. Abaixo disso, ela é desenhada como uma única linha.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar