Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Outline CSS

API reference

Gere o outline e o outline-offset do CSS — largura, estilo, cor e espaçamento — com visualização ao vivo e uma regra :focus-visible pronta para anéis de foco acessíveis. Copie o CSS e o HTML.

Entrada

Usado apenas na visualização e no trecho HTML.

Espaço entre a borda do elemento e o contorno. Valores negativos desenham o outline por dentro.

Navegadores modernos fazem o outline acompanhar os cantos.

Limita a regra ao foco do teclado, o padrão recomendado para anéis de foco.

Saída

Sua caixa com contorno aparecerá aqui.

Declarações de outline
CSS
HTML
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/css-outline-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `css-outline-generator` tool (CSS Outline Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/css-outline-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Outline CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

A propriedade outline do CSS desenha uma linha ao redor de um elemento sem alterar seu tamanho nem empurrar os vizinhos, o que a diferencia de border. Ela é a base dos anéis de foco do teclado. Este gerador permite ajustar largura, estilo, cor e outline-offset com visualização ao vivo e depois copiar o CSS.

Como usar

  1. Defina a largura, o estilo e a cor. Há oito estilos disponíveis: solid, dashed, dotted, double, groove, ridge, inset e outset.
  2. Ajuste o deslocamento. O outline-offset define a distância entre o elemento e a linha. Um valor negativo desenha o outline por dentro da borda do elemento.
  3. Escolha o raio do canto. Os navegadores atuais fazem o outline acompanhar cantos arredondados.
  4. Ative "Mostrar apenas em :focus-visible" para obter uma regra que aparece somente com o foco do teclado, o padrão recomendado para anéis de foco.
  5. Copie o resultado: as declarações, uma regra CSS completa e um trecho HTML correspondente.

Outline vs. border

  • O outline não ocupa espaço no layout, então alterá-lo nunca desloca a página.
  • Outlines podem ser afastados do elemento; bordas não.
  • Outlines são sempre iguais em todos os lados e seguem o border-radius nos navegadores atuais.

Dicas de acessibilidade

  • Nunca escreva outline: none sem uma substituição visível. Usuários de teclado dependem do anel de foco.
  • Busque uma razão de contraste de 3:1 entre a cor do outline e o fundo ao redor.
  • Um outline de 2–3px com deslocamento de 2px é um padrão claro e muito usado.

Para molduras decorativas, experimente o Gerador de Estilo de Border CSS. Para brilhos suaves, veja o Gerador de Box Shadow CSS.

Privacidade

Tudo roda no seu navegador. Suas configurações nunca são enviadas.

outlineoutline-offsetfocus ringfocus-visiblecss outlineaccessibilityborder alternative

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios