Gerador de border-radius
Border Radius Generator
Modela cada canto separadamente, inclusive a sintaxe de dois valores para squircle, e gera o CSS.
Arredonda os cantos de uma caixa com todos os oito valores de raio disponíveis e — porque “transforme isto em um squircle” chega como a mesma pergunta — também desenha formas reais de superelipse e `clip-path`, o que `border-radius` não consegue.
Prévia
CSS
Cantos
Superior esquerdo
Superior direito
Inferior direito
Inferior esquerdo
Predefinições
clip-path
Uma propriedade diferente com um trabalho diferente. border-radius arredonda uma caixa; clip-path recorta uma forma arbitrária e leva a sombra junto.
Como usar
Arraste os controles dos cantos
Quatro cantos em px ou em porcentagem. A prévia e a declaração se atualizam juntas.
Desligue “igual nos dois eixos” para as formas orgânicas
Isso dá a forma de oito valores com barra, em que cada canto tem um raio horizontal e um vertical. Toda forma orgânica de blob vem dessa forma.
Mude para clip-path quando a forma não for um retângulo
Círculos, polígonos, um balão de fala, um chevron — e o controle de superelipse, que é a curva de squircle de verdade, e não um retângulo mais arredondado.
Perguntas frequentes
Por que um raio de 9999px parece igual a 50%?
Porque, quando os raios de um lado se sobreporiam, a especificação escala *todos os quatro* pelo mesmo fator até caberem. Então qualquer valor absurdamente grande colapsa na mesma forma, e a página mostra o fator que usou.
O CSS consegue desenhar um squircle de verdade?
Com `border-radius`, não — esse canto é estritamente elíptico, então um “controle de squircle” pregado em um raio é só um retângulo mais arredondado. A superelipse aqui é desenhada como um polígono de `clip-path`, que é o jeito honesto de obter a curva hoje.
Por que minha sombra sumiu com clip-path?
Porque `clip-path` recorta o elemento, e a sombra é desenhada fora do elemento. Ele também recorta filhos que transbordam. `border-radius` não faz nenhuma das duas coisas, e é por isso que continua sendo a ferramenta certa sempre que a forma é um retângulo arredondado.
Como arredondo só os cantos externos de um grupo?
Arredonde o contêiner e dê a ele `overflow: hidden`, ou use `:first-child`/`:last-child` nos itens. Um raio por canto no próprio grupo não chega aos filhos, que é o que normalmente dá errado em um grupo de botões.
Pode receber de
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.