Quais estilos de borda são suportados?

Todos os estilos de borda CSS padrão são suportados: solid, dashed, dotted, double, groove, ridge, inset e outset.

Posso definir raios diferentes para cada canto?

Sim, expanda a seção Border Radius e mude para o modo 'Por canto' para definir valores individuais para superior esquerdo, superior direito, inferior direito e inferior esquerdo.

O que é 'outline-offset'?

Outline-offset controla o espaço entre a borda do elemento e seu contorno. Um valor positivo move o contorno para fora; um valor negativo o move para dentro.

Como box-shadow é diferente de border?

Box-shadow não afeta o layout — é renderizado fora do modelo de caixa — enquanto border adiciona às dimensões do elemento. Box-shadow também suporta spread, blur e múltiplas camadas.

design Gratuito Sem cadastro

Gerador de Bordas e Contornos CSS

Crie visualmente bordas, contornos e box-shadows CSS com prévia ao vivo e saída de código instantânea.

Carregando ferramenta…

Sobre esta ferramenta

Um construtor visual para estilos de borda e contorno CSS. Controle largura, estilo, cor e border-radius por canto da borda, ou personalize cada lado (topo, direita, baixo, esquerda) individualmente. Adicione contornos com offset configurável e use box-shadow como alternativa de borda. A prévia ao vivo é atualizada instantaneamente e o CSS gerado está sempre pronto para copiar.

Como usar

1 Passo 1: Escolha entre o modo 'Todos os lados' ou 'Lados individuais' para controlar as bordas uniformemente ou por lado.
2 Passo 2: Ajuste a largura, estilo e cor da borda usando os controles, e defina o border-radius por canto ou uniformemente.
3 Passo 3: Ative as seções de Contorno ou Box Shadow para adicionar esses estilos ao seu elemento e configure suas opções.
4 Passo 4: Clique em 'Copiar CSS' para copiar o código CSS gerado, depois cole-o no seu projeto.

Sobre esta ferramenta

Como usar

Perguntas frequentes