Gerador de borda CSS personalizada
Ajuste espessura, estilo, cor e arredondamento de uma borda CSS — de forma uniforme ou por lado — com pré-visualização em tempo real, e depois copie o código pronto para uso. Processamento 100% local — nada é enviado a um servidor.
Como funciona
Uma borda CSS combina três informações: uma espessura, um estilo de traço e uma cor, eventualmente arredondada com border-radius. Esta ferramenta permite ajustar esses valores de forma uniforme nos quatro lados ou independentemente para cada lado, com um resultado visual imediato para validar o efeito antes de copiar o código.
Qual é a diferença entre "groove", "ridge", "inset" e "outset"?
Esses quatro estilos simulam um efeito de relevo em 3D a partir da cor escolhida: "groove" dá a impressão de um sulco cavado, "ridge" de uma aresta em relevo, "inset" de um quadro afundado e "outset" de um quadro saliente; o resultado exato depende do navegador e da cor de fundo utilizada.
Por que separar as espessuras por lado em vez de usar o atalho "border"?
O atalho border não permite definir uma espessura diferente por lado; para um efeito assimétrico (borda espessa no topo, fina nas laterais), é preciso usar as propriedades detalhadas border-top-width, border-right-width, etc., como faz esta ferramenta quando a opção "mesma espessura" está desativada.
Nenhum dado é transmitido a um servidor: a pré-visualização e o código são gerados diretamente no seu navegador.