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

Gerador de Círculo CSS – 50% do Raio da Borda

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 definidos como 50%, o valor que transforma uma caixa em um círculo usando nada além de CSS. Honestamente: em uma caixa quadrada isso forma um círculo perfeito, mas em uma caixa retangular os mesmos 50% produzem uma elipse semelhante a um estádio, já que cada canto apenas arredonda seu próprio quarto.

Essa distinção é importante porque 50% do raio da borda é a maneira mais comum de criar avatares circulares, emblemas de ícones e pontos de status em CSS – muito mais simples do que recortar um círculo com uma máscara ou desenhar um em SVG, e permanece nítido em qualquer tamanho, pois é uma porcentagem relativa, não um raio de pixel fixo.

Mude a caixa para um tamanho quadrado fixo em seu próprio CSS para travar no círculo perfeito ou deixe-a retangular propositalmente para um formato semelhante a uma pílula - de qualquer forma, os cantos permanecem vinculados aqui para que um único controle deslizante mantenha todos os quatro sincronizados enquanto você copia o CSS resultante.

🛡️
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.