Skip to main content
FreeToolkit .ai

Gerador de Raio de Borda CSS Gere valores de border-radius do CSS com controle por canto e pré-visualização.

Gerador de Raio de Borda CSS illustration
🎨

Gerador de Raio de Borda CSS

Gere valores de border-radius do CSS com controle por canto e pré-visualização.

1

Escolha cantos vinculados ou individuais

Alterne entre controlar todos os cantos juntos ou de forma independente.

2

Ajuste o raio

Use controles deslizantes para definir o valor do border-radius para cada canto.

3

Copie o CSS

Visualize a forma e copie a propriedade de border-radius do CSS gerada.

Loading tool...

What Is Gerador de Raio de Borda CSS?

O Gerador de Bordas Arredondadas do CSS oferece controle visual sobre a propriedade border-radius, permitindo que você crie cantos arredondados para qualquer elemento HTML. Você pode vincular todos os cantos para um arredondamento uniforme ou controlar cada canto independentemente para criar formas únicas. A ferramenta oferece uma pré-visualização ao vivo que é atualizada à medida que você ajusta os controles deslizantes, mostrando exatamente como o seu elemento será exibido. Você também pode personalizar o tamanho da caixa de pré-visualização e a cor do fundo. O raio da borda é uma das propriedades CSS mais comumente usadas no design web moderno, essencial para criar botões arredondados, cartões, avatares e outros elementos de interface do usuário. A propriedade abreviada aceita de um a quatro valores para arredondamento uniforme ou por canto, e essa ferramenta lida com ambos os casos com um toggle simples.

Why Use Gerador de Raio de Borda CSS?

  • Controle por canto ou arredondamento uniforme vinculado com um simples toggle
  • Visualização ao vivo personalizável com tamanho e cor da caixa
  • Gera shorthand e longhand CSS conforme necessário
  • Perfeito para criar círculos, pílulas e formas arredondadas personalizadas

Common Use Cases

Cartões Arredondados

Crie componentes de cartão consistentemente arredondados para layouts de painel e conteúdo.

Botões em Forma de Pílula

Desenhe botões em forma de pílula ou cápsula com valores altos de border-radius.

Ícones Circulares

Crie círculos perfeitos para ícones de usuário definindo o raio como 50%.

Formas Assimétricas

Desenhe formas únicas com valores diferentes de raio em cada canto.

Technical Guide

A propriedade border-radius do CSS é uma abreviação para quatro propriedades individuais: border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. Ela aceita de um a quatro valores em ordem horária, começando pelo canto superior esquerdo. Um único valor se aplica a todos os cantos. Dois valores definem o canto superior esquerdo/inferior direito e o canto superior direito/inferior esquerdo. Três valores definem o canto superior esquerdo, o canto superior direito/inferior esquerdo e o canto inferior direito. Quatro valores definem cada canto individualmente. Os valores podem ser em pixels, porcentagens ou outras unidades de comprimento do CSS. Definir border-radius como 50% em um elemento quadrado cria um círculo perfeito. A propriedade também pode aceitar dois conjuntos de valores separados por uma barra (/) para cantos elípticos, onde o primeiro conjunto define os raios horizontais e o segundo define os raios verticais. O border-radius funciona em elementos com bordas visíveis, fundos ou contornos.

Tips & Best Practices

  • 1
    Use 50% para criar um círculo perfeito em um elemento quadrado
  • 2
    Valores grandes (9999px) criam elementos em forma de pílula independentemente do tamanho
  • 3
    Combine valores diferentes de canto para formas únicas e orgânicas
  • 4
    Use porcentagens para border-radius responsivo que se ajusta ao elemento

Related Tools

Gerador de Sombra de Caixa CSS - free online tool

Gerador de Sombra de Caixa CSS

Gere sombras de caixa CSS com múltiplas camadas, opções de inserção e pré-visualização em tempo real.

🎨 CSS & Design
Gerador de Botões CSS - free online tool

Gerador de Botões CSS

Crie botões personalizados com cores, preenchimento, bordas, sombras e efeitos ao passar o mouse.

🎨 CSS & Design
Gerador de Cartões CSS - free online tool

Gerador de Cartões CSS

Crie designs de cartões glassmórficos com controle de blur, transparência e sombra.

🎨 CSS & Design
Gerador de Caminho de Recorte CSS - free online tool

Gerador de Caminho de Recorte CSS

Crie formas de caminho de recorte CSS com predefinições de polígono, círculo e elipse.

🎨 CSS & Design

Frequently Asked Questions

Q Como criar um círculo perfeito?
Defina o border-radius como 50% em um elemento quadrado (largura e altura iguais).
Q Posso definir valores diferentes para cada canto?
Sim, desmarque "Vincular todos os cantos" para controlar cada canto de forma independente.
Q Qual é o valor máximo do border-radius?
Não há um valor máximo, mas valores maiores que metade do tamanho do elemento não têm efeito adicional.
Q O border-radius afeta a recorte de conteúdo?
Sim, o conteúdo incluindo fundos e imagens será recortado para a forma arredondada. Adicione overflow: hidden para elementos filhos.
Q Posso usar porcentagens em vez de pixels?
Sim, as porcentagens tornam o raio relativo às dimensões do elemento, o que é útil para designs responsivos.

About This Tool

Gerador de Raio de Borda CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.