Gerador de Border Radius
Gere valores CSS border-radius visualmente. Controle cada canto independentemente e copie o codigo CSS.
Principais recursos
- Controle individual do raio de cada canto
- Vincular/desvincular cantos para valores uniformes
- Formas predefinidas (pílula, círculo, folha, ticket)
- Cópia do código CSS com um clique
Guide
A propriedade border-radius do CSS controla o arredondamento dos cantos dos elementos. Na sua forma mais simples, border-radius: 8px arredonda todos os quatro cantos em 8 pixels. Na sua forma mais complexa, border-radius aceita oito valores (quatro raios horizontais e quatro raios verticais separados por uma barra) para criar cantos assimétricos e elípticos que produzem formas orgânicas e não circulares. Este guia cobre todos os aspectos do border-radius: sintaxe, efeitos visuais, padrões comuns, considerações de desempenho e aplicações de design. A sintaxe básica recebe de um a quatro valores representando o raio do círculo de cada canto. Um valor se aplica a todos os quatro cantos: border-radius: 10px. Dois valores definem superior-esquerdo/inferior-direito e superior-direito/inferior-esquerdo: border-radius: 10px 20px. Três valores definem superior-esquerdo, superior-direito/inferior-esquerdo e inferior-direito: border-radius: 10px 20px 30px. Quatro valores definem cada canto individualmente em ordem horária começando pelo superior-esquerdo: border-radius: 10px 20px 30px 40px. Você também pode atingir cantos individuais com propriedades abreviadas: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. Valores em porcentagem criam efeitos que escalam com o elemento. border-radius: 50% em um elemento quadrado produz um círculo perfeito. Em um elemento retangular, 50% produz uma elipse. Isso acontece porque valores em porcentagem são relativos às dimensões do elemento: raios horizontais são porcentagens da largura, raios verticais são porcentagens da altura. Um elemento de 200px por 100px com border-radius: 50% tem cantos com raio horizontal de 100px e raio vertical de 50px, criando uma elipse em vez de um círculo. Essa relação dimensional é importante de entender ao trabalhar com layouts responsivos onde as proporções do elemento mudam em diferentes tamanhos de viewport. A sintaxe de barra permite cantos elípticos onde os raios horizontais e verticais diferem. border-radius: 50px / 25px cria cantos que curvam mais horizontalmente do que verticalmente, produzindo um efeito alongado e oval. A sintaxe completa de oito valores é: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, onde h é o raio horizontal e v é o raio vertical. Esse nível de controle permite criar formas orgânicas e semelhantes a blobs que seriam difíceis de alcançar de outra forma. Um valor como border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produz uma forma assimétrica e de aparência natural frequentemente usada em design web moderno para blobs decorativos, fundos de avatar e divisores de seção. Entender a geometria por trás do border-radius ajuda a prever resultados visuais. Cada canto do elemento recebe uma elipse (ou círculo se ambos os raios forem iguais) ajustada a ele. A borda, o fundo e o conteúdo são todos recortados para esse retângulo arredondado. A elipse de cada canto é definida por seu raio horizontal (estendendo-se ao longo da borda superior ou inferior) e seu raio vertical (estendendo-se ao longo da borda esquerda ou direita). Quando ambos os raios são iguais, o canto é um arco circular. Quando diferem, o canto é um arco elíptico. Visualizar essa elipse ajuda você a entender por que certas combinações de valores produzem formas inesperadas. Criar um círculo perfeito exige duas condições: o elemento deve ser quadrado (largura e altura iguais) e o border-radius deve ser 50% ou um valor igual à metade do tamanho do elemento. Se o elemento não é quadrado, border-radius: 50% cria uma elipse. Para fotos de perfil e avatares, garanta que o contêiner seja quadrado usando valores iguais de largura e altura, ou use aspect-ratio: 1 em CSS, depois aplique border-radius: 50%. Overflow: hidden no contêiner recorta a imagem para a forma circular. Uma alternativa é usar clip-path: circle(50%) que produz o mesmo resultado visual. Formas de pílula (formas de estádio) são retângulos com lados curtos totalmente arredondados. Aplique border-radius com um valor igual ou superior à metade da altura do elemento. Para um botão de 40px de altura, border-radius: 20px arredonda as extremidades em semicírculos. Usar um valor muito grande como border-radius: 9999px garante uma forma de pílula independentemente da altura do elemento, porque o navegador limita o raio à metade da menor dimensão. Essa técnica é comum para tags, emblemas, botões e campos de entrada em design de interface moderno. A forma de pílula tornou-se o estilo padrão de botão em muitos sistemas de design, incluindo as Diretrizes de Interface Humana da Apple. O border-radius interage com várias outras propriedades CSS de formas que afetam o resultado renderizado. A própria borda é afetada: a linha da borda segue o canto arredondado, mantendo sua espessura por toda a curva. Outline não segue o border-radius na maioria dos navegadores, renderizando como um retângulo mesmo quando o elemento tem cantos arredondados (embora Firefox e versões mais recentes do Chromium agora suportem outlines arredondados). Box-shadow segue o border-radius, projetando sombras arredondadas que correspondem à forma do elemento. Overflow: hidden recorta o conteúdo filho para a forma arredondada, o que é essencial para imagens dentro de contêineres arredondados. Background-clip determina se o fundo se estende sob a borda até a área arredondada. O algoritmo de renderização do border-radius resolve conflitos quando a soma dos raios adjacentes excede o espaço disponível. Se você define border-top-left-radius: 100px e border-top-right-radius: 100px em um elemento que tem apenas 150px de largura, os dois raios somam 200px, mas apenas 150px estão disponíveis. O navegador reduz proporcionalmente ambos os raios para caber. Especificamente, ele calcula um fator de escala (150/200 = 0,75) e o aplica a ambos os raios, resultando em 75px cada. Esse ajuste automático significa que você pode usar valores grandes de raio sem se preocupar com overflow, embora o resultado visual possa diferir da sua intenção. O algoritmo considera todos os quatro cantos simultaneamente, encontrando o menor fator de escala necessário. Border-radius aninhado exige que os elementos internos tenham raios menores do que seus pais para manter espaçamento visual consistente. Se um cartão tem border-radius: 16px e padding: 8px, a área de conteúdo interna deve ter border-radius: 8px (raio do pai menos padding). A fórmula é: raio interno = raio externo - espaço entre elementos. Se o espaço for maior que o raio externo, o raio interno deve ser 0 (sem arredondamento). Esse princípio se aplica a cartões contendo imagens, contêineres aninhados e qualquer relação pai-filho onde ambos têm cantos arredondados. Ignorar essa regra cria larguras de espaçamento inconsistentes nos cantos que parecem visualmente erradas mesmo se você não conseguir identificar imediatamente o porquê. Formas CSS e border-radius servem a propósitos diferentes que às vezes são confundidos. Border-radius arredonda os cantos visuais e a área de clique de um elemento. CSS clip-path cria formas arbitrárias através de recorte (circle(), ellipse(), polygon(), path()). Para retângulos arredondados simples, border-radius tem melhor desempenho e é mais fácil de manter. Para formas complexas (triângulos, hexágonos, polígonos personalizados), clip-path é necessário. Border-radius é composto na GPU e é um dos efeitos visuais mais baratos em CSS. Clip-path com polígonos complexos pode ser mais caro. A propriedade shape-outside usa border-radius para quebra de texto em torno de elementos arredondados, criando layouts no estilo revista. O desempenho do border-radius geralmente é excelente. Cantos arredondados são renderizados pelo compositor de GPU em todos os navegadores modernos e não acionam recálculo de layout ou repintura durante animações. Animar o próprio border-radius também tem bom desempenho porque o navegador pode interpolar os valores e compor o resultado na GPU. Isso torna border-radius adequado para efeitos de hover (transição de cantos quadrados para arredondados) e elementos animados. A única consideração de desempenho é quando border-radius é combinado com box-shadow em muitos elementos, já que cada sombra arredondada exige trabalho adicional de composição. O suporte do navegador para border-radius é universal em todos os navegadores modernos sem prefixos. Os prefixos -webkit-border-radius e -moz-border-radius não são necessários desde aproximadamente 2012. Os únicos casos extremos envolvem a sintaxe de barra para cantos elípticos, que tem sido suportada em todos os lugares desde o IE9. Se você está suportando navegadores muito antigos (IE8), border-radius degrada graciosamente: o elemento simplesmente é renderizado com cantos quadrados. Nenhuma funcionalidade é perdida, apenas o arredondamento visual. Tendências de design envolvendo border-radius alternam entre extremos. O início dos anos 2010 favoreceu arredondamento sutil de 3px a 5px. Meados dos anos 2010 retornaram a cantos aguçados de 0px no flat design. O final dos anos 2010 trouxe de volta o arredondamento suave com raios de 8px a 16px no material design e interfaces influenciadas pelo iOS. O início dos anos 2020 introduziu designs super-arredondados com raios de 20px+ e formas de blob assimétricas. As tendências atuais favorecem arredondamento médio (8px a 16px) para componentes de interface e arredondamento maior (24px+) para cartões e contêineres, criando uma sensação suave e acessível. A forma squircle (superelipse), que a Apple usa para seus ícones de aplicativo, ganhou popularidade, mas exige clip-path ou SVG porque border-radius cria um arco circular padrão, não uma superelipse. Valores consistentes de border-radius em um sistema de design criam coesão visual. Defina uma escala de tokens de raio: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Aplique esses tokens consistentemente: botões usam --radius-md, cartões usam --radius-lg, avatares usam --radius-full, pequenos emblemas usam --radius-sm. Essa abordagem sistemática evita a inconsistência visual de valores aleatórios de raio (6px aqui, 10px ali, 14px em outro lugar) que faz os designs parecerem não polidos. Muitos frameworks CSS (Tailwind, Chakra UI) incluem escalas de raio predefinidas por esse motivo. Border-radius responsivo pode ser alcançado usando clamp(), min() ou media queries. Um cartão com border-radius: clamp(8px, 2vw, 24px) tem arredondamento menor em telas pequenas e maior em telas largas. Isso impede que raios grandes dominem elementos pequenos em mobile. Alternativamente, reduza o border-radius em breakpoints móveis: border-radius: 24px em desktop, 12px em tablet, 8px em mobile. Para cartões mobile de largura total que tocam as bordas da tela, remover o border-radius inteiramente em telas pequenas (border-radius: 0 no breakpoint mobile) é um padrão comum que maximiza a área de conteúdo. Border-radius com imagens exige overflow: hidden no contêiner para recortar a imagem para a forma arredondada. Sem overflow: hidden, a imagem se estende além dos cantos arredondados e o arredondamento aparece apenas no fundo do contêiner. Uma abordagem alternativa usa a própria imagem como background-image em um elemento arredondado. Para elementos <img>, a propriedade object-fit controla como a imagem preenche o contêiner arredondado: object-fit: cover preenche toda a área (recortando conforme necessário), enquanto object-fit: contain ajusta a imagem inteira dentro (potencialmente deixando espaços). Ambas as abordagens funcionam, mas overflow: hidden em um contêiner com um <img> filho é mais comum porque preserva o elemento img para acessibilidade (texto alt) e SEO. Criação de formas avançadas combina border-radius com outras propriedades CSS para criar formas complexas sem imagens ou SVG. Uma forma de ovo usa raios verticais assimétricos: border-radius: 50% / 60% 60% 40% 40%. Uma forma de folha usa arredondamento de cantos opostos: border-radius: 0 50% 0 50%. Uma forma de gota combina border-radius em três cantos com um quarto canto aguçado. Um balão de fala usa border-radius na forma principal com um pseudo-elemento (::before ou ::after) para a cauda. Essas formas apenas em CSS evitam a necessidade de SVG ou imagens para elementos decorativos simples, reduzindo requisições HTTP e permitindo temas de cor fáceis através de propriedades personalizadas CSS. Border-radius e conteúdo de texto interagem de maneiras específicas. O texto dentro de um elemento arredondado não segue a curva. O texto é disposto na caixa de conteúdo retangular e os cantos arredondados recortam apenas o fundo e a borda. Para valores pequenos de raio, isso não é perceptível. Para valores grandes de raio, o texto perto dos cantos pode parecer ter padding extra porque o fundo arredondado se afasta da borda do conteúdo. Esse é um dos motivos pelos quais elementos com grandes valores de border-radius costumam precisar de mais padding do que suas contrapartes quadradas. Se você define border-radius: 24px em um botão, o padding deve ser de pelo menos 12px a 16px nas laterais para que o texto não se amontoe visualmente na borda curva. Animação de border-radius entre estados cria transições suaves de forma. Transicionar de border-radius: 0 para border-radius: 50% em um elemento quadrado o transforma de um quadrado para um círculo. Esse efeito é popular para indicadores de carregamento, efeitos de hover e animações de revelação. CSS transition: border-radius 0.4s ease cuida da interpolação. Para morphing mais complexo (transição entre diferentes formas assimétricas usando a sintaxe de barra), transições CSS interpolam cada um dos oito valores independentemente, produzindo formas intermediárias suaves. Folhas de estilo de impressão e border-radius merecem consideração para aplicações web que os usuários podem imprimir. A maioria dos navegadores modernos renderiza border-radius na impressão, mas algumas versões mais antigas não. Se o seu design depende de cantos arredondados para significado (não apenas decoração), teste a saída de impressão. Para faturas, recibos e outros documentos imprimíveis, cantos arredondados são decorativos e sua ausência na impressão não afeta a usabilidade. Border-radius em frameworks CSS e bibliotecas de componentes padronizou-se para uma abordagem baseada em tokens. O Tailwind CSS usa classes como rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl e rounded-full. O Bootstrap usa rounded, rounded-circle, rounded-pill e rounded-0 até rounded-5. O Chakra UI usa borderRadius com tamanhos nomeados (sm, md, lg, xl, full). Entender como esses frameworks implementam border-radius ajuda você a migrar entre sistemas e personalizar padrões para corresponder aos seus requisitos de design. Squircles (superelipses) são uma forma que parece um retângulo arredondado, mas com uma curva matemática diferente. A Apple usa squircles para ícones de aplicativos do iOS. Um squircle tem curvatura mais gradual na transição da borda reta para a curva, produzindo um visual mais suave do que um arco de círculo padrão de border-radius. CSS border-radius não pode produzir um squircle verdadeiro porque usa arcos circulares ou elípticos. Para criar um squircle em CSS, você precisa de clip-path com uma função path() ou uma máscara SVG. A diferença visual entre um retângulo arredondado por border-radius e um squircle é sutil em tamanhos pequenos, mas perceptível em tamanhos maiores, especialmente em raios de canto acima de 20px. Container queries e border-radius podem trabalhar juntos para design de componente verdadeiramente responsivo. Com CSS container queries (@container), você pode mudar o border-radius com base no tamanho do contêiner em vez do tamanho da viewport. Um componente de cartão com border-radius: 24px em um contêiner largo pode mudar para border-radius: 12px quando colocado em uma barra lateral estreita, independentemente da largura geral da página. Essa responsividade em nível de componente produz resultados visuais mais consistentes do que media queries baseadas apenas em viewport. Border-radius em elementos de tabela exige tratamento especial. Por padrão, border-radius em um elemento <table> não arredonda os cantos das células individuais. Para criar uma tabela com cantos externos arredondados, defina border-collapse: separate (não collapse) na tabela, aplique border-radius ao elemento tabela e oculte o overflow com overflow: hidden. Para células arredondadas individuais, aplique border-radius a elementos específicos <td> ou <th>. O border-top-left-radius vai na primeira célula da primeira linha, border-top-right-radius na última célula da primeira linha, e assim por diante. Essa abordagem por célula é verbosa, mas oferece controle preciso. Funções de temporização de transição afetam como as animações de border-radius parecem. Uma transição linear produz arredondamento mecânico e robótico. Uma transição ease começa rápido, desacelera no meio e acelera no final, produzindo uma sensação natural. Uma transição ease-in-out cria aceleração e desaceleração suaves. Para interfaces lúdicas, funções cubic-bezier podem criar mudanças de raio saltitantes ou elásticas: transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) ultrapassa o valor alvo antes de assentar. Combine a função de temporização ao estilo geral de animação da sua interface. CSS Houdini e a Paint API abrem possibilidades futuras para border-radius além do que a especificação atual oferece. Com Houdini, você pode criar worklets de pintura personalizados que desenham qualquer forma de canto que você queira: squircles, bordas festonadas, bordas onduladas e outras formas que o border-radius padrão não consegue produzir. Embora o suporte a Houdini ainda seja limitado (principalmente navegadores Chromium), ele representa o futuro das formas CSS personalizadas. Enquanto isso, clip-paths e máscaras SVG fornecem alternativas multi-navegador para formas de canto não padrão. Testar border-radius em diferentes resoluções de tela e densidades de pixel é importante porque a renderização de bordas curvas difere entre displays padrão (1x), Retina (2x) e de densidade mais alta. Em um display 1x, uma borda de 1px em um canto arredondado pode parecer denteada. Em um display 2x, o mesmo canto é renderizado suavemente porque há mais pixels físicos disponíveis para representar a curva. Se o seu público-alvo inclui usuários em displays de baixa densidade, teste se seus cantos arredondados parecem aceitáveis em resolução 1x. Valores de raio maiores são renderizados mais suavemente em todas as densidades porque a curva é mais gradual. O gerador de border-radius permite que você ajuste visualmente o raio horizontal e vertical de cada canto independentemente, pré-visualize o resultado em tempo real e copie o CSS. Isso é mais rápido do que adivinhar valores em código, especialmente para a sintaxe de barra onde a relação entre oito valores e a saída visual não é intuitiva. Use o gerador para explorar formas assimétricas, encontrar os valores exatos que correspondem à sua intenção de design e depois aplicar esses valores na sua folha de estilos.
Perguntas frequentes
Posso definir valores diferentes para cada canto?
Sim, você pode controlar independentemente os quatro cantos: superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Quais unidades são usadas?
A ferramenta usa pixels (px) por padrão, que você pode alterar na saída CSS conforme necessário.
