Os resultados são fornecidos apenas para fins informativos e podem conter erros. Verifique de forma independente as informações importantes. O uso desta ferramenta é por sua conta e risco.
O que esta ferramenta faz
O Gerador de Border-Radius CSS permite arredondar cada canto de uma caixa separadamente com quatro sliders, de 0 a 100 pixels, e ver a forma em uma pré-visualização ao vivo. O resultado é uma única declaração border-radius que você pode colar na sua folha de estilos. Os quatro cantos começam em 20px.
Os valores são escritos na ordem que o CSS espera: superior esquerdo, superior direito, inferior direito, inferior esquerdo, no sentido horário a partir do canto superior esquerdo. Valores iguais geram um card arredondado por igual; valores diferentes geram balões de fala, abas, formatos de folha e outros designs assimétricos. A forma abreviada funciona em todos os navegadores atuais, sem prefixos.
Quando usar
- Estilizar cards, botões e campos de entrada seguindo o raio de canto de um design system.
- Arredondar só os cantos superiores de uma aba ou os cantos inferiores de um dropdown.
- Criar um formato de balão de chat com um canto reto.
- Testar raios diferentes rapidamente, em vez de editar o CSS e recarregar a página.
Exemplo prático
Entrada
Superior esquerdo 24, superior direito 24, inferior direito 4, inferior esquerdo 24Saída
border-radius: 24px 24px 4px 24px;Perguntas sobre esta ferramenta
Como faço um círculo perfeito?
Aplique border-radius: 50% a um elemento quadrado. A porcentagem é relativa ao tamanho do elemento, então ele continua redondo em qualquer largura. Já um botão em formato de pílula usa um valor grande em pixels, como 999px.
Por que o fundo vaza para fora dos cantos arredondados?
Elementos filhos com fundo próprio podem ser pintados por cima dos cantos. Adicione overflow: hidden ao elemento pai arredondado, ou dê ao filho o mesmo raio.
Um canto pode ser elíptico?
Sim. O CSS aceita dois raios por canto separados por uma barra, como border-radius: 50px / 25px. O gerador escreve a forma circular comum; edite o resultado para adicionar o segundo valor.
O border-radius também afeta a sombra?
Sim. Um box-shadow acompanha o contorno arredondado, então os cantos coincidem. Monte a sombra com o Gerador de Sombras CSS e combine as duas declarações.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.