Gerador de raio de borda CSS
Cantos redondos exatamente como você quer — De cartões sutis a bolhas lúdicas.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como definir um raio de borda CSS
- Defina os cantos — juntos ou um por um.
- Ou mude para o modo de bolha e arraste as alças.
- Copie a classe CSS ou Tailwind.
Sobre: Gerador de border-radius
Crie valores CSS de raios de borda visualmente.
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Cartões, botões e avatares
- Fundos de bolhas orgânicas
- Bolhas de fala, abas e folhas
Dica: Porcentagens escala com o elemento; px manter a mesma curva em qualquer tamanho.
Perguntas frequentes
Como eu faço uma forma de bolha?
Alterne para "Fancy blob shape", arraste as 4 alças ao longo das bordas (ou use os controles deslizantes) ou pressione Random blob. Isso usa a sintaxe slash: horizontal radii / Raio vertical.
Como faço um círculo ou pílula?
Um círculo é de raio-fronteira: 50% em um elemento quadrado; uma pílula é um raio muito grande (como 999px) em um elemento largo.
O que os 4 valores significam?
Eles vão no sentido horário do canto superior esquerdo: superior esquerdo, superior direito, inferior direito, inferior esquerdo.
Qual unidade devo usar?
Pixels para cantos fixos, % para escalar com o elemento (50% transforma um quadrado em um círculo) ou rem para seguir o tamanho da fonte.
Por que os cantos da minha imagem não são arredondados?
Coloque o raio na imagem em si, ou em seu recipiente junto com o transbordamento: oculto, então a imagem é cortada nos cantos arredondados.