Gerador de cantos arredondados e formas
Ajuste os raios horizontal e vertical dos quatro cantos em px ou % e confira a prévia da forma. Copie ou salve o CSS border-radius gerado. A largura, a altura e a cor da prévia não são incluídas no CSS.
O que você pode fazer
Ajuste o arredondamento com uma predefinição
Escolha entre 8 predefinições, incluindo cantos arredondados, uma cápsula e uma folha, e ajuste os raios. Selecionar uma predefinição substitui os raios e a unidade.
Defina arredondamentos diferentes para cada um dos quatro cantos
Desative a configuração de raios iguais para inserir separadamente os raios horizontal e vertical dos cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Confira e obtenha o CSS
Gere o CSS depois de conferir a forma. Alterne entre a abreviação e declarações individuais dos cantos; depois, copie o código ou salve-o como arquivo CSS.
Como usar
Escolha uma predefinição e a unidade
Insira os raios diretamente ou escolha uma predefinição para começar a ajustar. Trocar a unidade não converte os números.
Compare o arredondamento e a forma
Insira um valor para usar o mesmo raio em todos os cantos. Para variar por canto, desmarque a opção e ajuste os valores horizontais e verticais.
Confira o tamanho se necessário
Nas configurações da prévia, você pode alterar a largura, a altura e a cor da prévia. Esses valores não são incluídos no CSS de saída.
Gere o CSS e depois copie ou salve
Pressione “Gerar CSS” e escolha o formato desejado. Se alterar os raios, a unidade ou o tamanho, gere novamente.
Útil para
Modele os cantos de cartões e botões
Quando quiser criar CSS para componentes de página arredondando igualmente os quatro cantos ou somente os cantos superiores.
Crie um fundo arredondado assimétrico
Quando quiser variar o arredondamento horizontal e vertical de cada canto para criar contornos que lembrem folhas ou formas orgânicas.
Relação entre raios, unidades e tamanho exibido
Horizontal e vertical são duas direções do mesmo canto
O raio horizontal controla o arredondamento horizontal, e o raio vertical controla o arredondamento vertical. Um canto não é arredondado se qualquer um dos valores for 0. Especifique os quatro cantos no sentido horário, começando pelo superior esquerdo.
% usa largura e altura como referências separadas
Os valores horizontais em % usam a largura do elemento como referência, e os verticais usam a altura. Mesmo com os mesmos números, um quadrado e um retângulo alto ou largo têm aparências diferentes. px especifica diretamente um comprimento.
Raios grandes demais diminuem na mesma proporção
Se a soma dos raios adjacentes exceder o comprimento do lado, todos os 8 raios exibidos serão reduzidos pelo mesmo fator. Os valores de entrada e o CSS gerado permanecem inalterados. Depois de gerar, você pode conferir os raios usados na prévia nos detalhes.
Limites das formas que cantos arredondados podem representar
border-radius transforma os cantos em curvas elípticas. Não cria recortes nem polígonos arbitrários. A predefinição squircle aproxima a forma com cantos elípticos, sem reproduzir a curva matemática exata.
Perguntas frequentes
Posso definir um arredondamento diferente para cada canto?
Sim. Desmarque “Usar o mesmo raio em todos os cantos” para inserir separadamente os raios horizontal e vertical de cada canto. Ao marcar novamente, todos os raios recebem o raio horizontal do canto superior esquerdo.
Os números são convertidos quando troco de unidade?
Não. Os números são mantidos; somente a unidade muda. Se um valor acima de 100 permanecer após a troca de px para %, insira-o novamente dentro do intervalo de 0 a 100.
O tamanho e a cor da prévia estão incluídos no CSS?
Não. A saída contém somente as declarações de border-radius. Defina a largura, a altura e a cor de fundo na página ou no componente em que você usar o CSS.
Por que a forma exibida tem cantos menos arredondados que os raios que inseri?
O navegador reduz os raios exibidos na mesma proporção para evitar a sobreposição das curvas dos cantos. Em “Raios usados na exibição”, você pode conferir o fator de redução e os valores em px de cada canto.
Entrada e resultados
- Raios
- Especifique os 8 valores na mesma unidade: de 0 a 100% ou de 0 a 9999px. Valores decimais também são aceitos.
- Prévia
- A largura e a altura da prévia devem ser números inteiros de 1 a 400px. Se a largura não couber, você poderá rolar horizontalmente dentro do campo.
- Saída
- Abreviação border-radius ou declarações para cada um dos 4 cantos. Copie ou salve como border-radius.css.
- Não incluído
- Largura, altura, cor de fundo e exportações de imagem ou SVG.