Gerador de border-radius CSS
Gere border-radius CSS com cantos independentes, raios X/Y elípticos, unidades px ou % e predefinições de blobs. Gera a forma abreviada válida mais curta.
Predefinições
Cantos
Configurações da pré-visualização
Pré-visualização
border-radius: 16px;
Ferramentas Relacionadas
Ver TodasO que é Gerador de border-radius?
Defina o raio de cada canto separadamente, opcionalmente com raios horizontal e vertical diferentes para cantos elípticos, em px ou %. A ferramenta mostra a prévia da forma e escreve a forma abreviada border-radius equivalente mais curta.
Como usar Gerador de border-radius
- Escolha uma predefinição (Arredondado, Pílula, Círculo, Blob, Folha, Ingresso) ou defina os valores você mesmo.
- Escolha a unidade (px ou %) e ative os cantos elípticos se quiser raios X/Y separados.
- Ajuste cada canto (superior esquerdo, superior direito, inferior direito, inferior esquerdo); marque a opção de vincular todos os cantos para alterá-los juntos.
- Mude a largura, a altura e a cor nas configurações da prévia para ver a forma no seu tamanho.
- Copie o código CSS.
Exemplo
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Quando usar Gerador de border-radius
Use-o para cards arredondados, pílulas, avatares e formas orgânicas de blob feitas só com CSS. Porcentagens acompanham o tamanho do elemento (50% em um quadrado dá um círculo). Para polígonos arbitrários ou formas com cortes retos, use o Gerador de clip-path; para formas orgânicas complexas com muitos pontos, use o Gerador de blobs SVG.
Como funciona Gerador de border-radius
Os cantos seguem a ordem superior esquerdo, superior direito, inferior direito, inferior esquerdo, como o CSS exige. Cada grupo de quatro valores é encurtado com as regras padrão da forma abreviada: o quarto valor é omitido quando igual ao segundo, o terceiro quando igual ao primeiro e o segundo quando igual ao primeiro. Com cantos elípticos, os raios verticais vêm depois de uma barra (h / v); a parte após a barra é omitida quando cada raio vertical é igual ao seu raio horizontal.
Casos de Uso Comuns
- Botões e tags em formato de pílula
- Avatares circulares
- Imagens em formato de blob orgânico com raios elípticos de 8 valores
- Cards em formato de ingresso ou de folha
- Cantos assimétricos de balões de fala
Perguntas Frequentes
O que significa a barra no border-radius?
Os valores antes da barra são os raios horizontais e os depois dela são os raios verticais, o que produz cantos elípticos.
Por que 999px gera uma pílula?
Quando os raios são maiores que a caixa, os navegadores reduzem todos proporcionalmente, então um valor enorme sempre dá pontas perfeitamente arredondadas.
Devo usar px ou %?
px mantém a mesma curva em qualquer tamanho; % é relativo à largura (horizontal) e à altura (vertical) do elemento, o que é o desejado para círculos e blobs.