⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador de comprimidos CSS / formato de estádio

Projete o raio da borda CSS visualmente: quatro controles deslizantes de canto independentes em px ou porcentagem, um atalho de link para todos os cantos para círculos e pílulas instantâneos, além de um modo de blob orgânico com formas aleatórias.

12px
12px
12px
12px
Processando... 0%

Resultado

Esta página abre o gerador de raio de borda com todos os quatro cantos vinculados e empurrados para um raio muito grande: 999px. Em um retângulo típico do tamanho de um botão, um raio tão grande é cortado pelo navegador exatamente na metade da altura da caixa, que é o que produz a forma de pílula ou estádio totalmente arredondada, em vez de um quadrado com cantos levemente arredondados.

É por isso que os botões de pílula não precisam de um valor de raio preciso ajustado à altura de cada botão - qualquer número confortavelmente maior que a metade da altura fornece o resultado recortado idêntico, e é também por isso que 999px (ou mesmo 9999px) se tornou a abreviação informal da comunidade para 'arredondar até o fim' em CSS.

Redimensione a caixa em seu próprio layout e os mesmos 999px continuarão produzindo uma pílula completa em qualquer altura, já que o navegador sempre corta a metade da caixa automaticamente. Copie o CSS quando parecer correto ou desvincule os cantos para construir uma cápsula assimétrica.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Modo de cantos: controles deslizantes independentes de raio superior esquerdo, superior direito, inferior direito e inferior esquerdo, cada um comutável entre unidades px e percentuais.
  • Caixa de seleção Vincular todos os cantos que direciona todos os cantos de um controle deslizante, além de uma visualização em tabuleiro de xadrez em um fundo claro ou escuro para que os cantos cortados permaneçam visíveis.
  • Modo Blob com um botão Randomize que cria formas orgânicas de sintaxe de barra de oito valores, mostradas em tamanho grande e prontas para serem copiadas como CSS.

Principais benefícios

✓ Cada controle deslizante atualiza a visualização ao vivo e a linha CSS instantaneamente, para que você nunca precise adivinhar como realmente é 12px 40% 8px 24%.
✓ O atalho link-all-corners transforma um controle deslizante em um círculo, pílula ou esquilo perfeito sem tocar os outros três cantos com a mão.
✓ O modo Blob gera formas orgânicas e aleatórias com a sintaxe de barra CSS de oito valores – uma aparência que um único valor de raio de borda nunca pode produzir.

Casos de uso

  • • Disque os raios dos quatro cantos de um cartão de forma independente — arredondando apenas a parte superior de um painel suspenso ou apenas um lado de uma guia.
  • • Vincule todos os quatro cantos a um controle deslizante para criar um círculo perfeito, um botão de pílula em forma de estádio ou um esquilo estilo iOS em segundos.
  • • Mude para o modo blob e clique em Randomize até que uma forma orgânica caiba no espaço vazio atrás de uma imagem de herói ou avatar e, em seguida, copie o CSS.