Gerador border-radius
Arredonde cantos e crie formas blob orgânicas.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Dos cantos arredondados clássicos aos blobs da moda
O modo 4 cantos cobre o dia a dia: botões, cartões, avatares. O modo blob usa a sintaxe de oito valores para formas suaves e orgânicas muito populares em ilustrações e fundos decorativos.
-
Escolha o modo
4 cantos para um arredondamento simples, blob para uma forma orgânica.
-
Ajuste os controlos
O botão «Aleatório» gera um blob único com um clique.
-
Copie o CSS
A propriedade border-radius completa, pronta a colar.
A sintaxe em dois exemplos
| Modo | CSS gerado |
|---|---|
| 4 cantos iguais | border-radius: 16px; |
| Blob por defeito | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Antes da barra / | Raios horizontais dos 4 cantos |
| Depois da barra / | Raios verticais dos 4 cantos |
Tudo é calculado no seu navegador. Para cortar uma imagem pela forma, adicione overflow: hidden no contentor.
Perguntas frequentes
Como arredondo um único canto?
No modo «4 cantos», ajuste o controlo do canto desejado e deixe os outros a 0. O CSS gerado lista os raios na ordem superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo; quando todos os valores são iguais, a ferramenta escreve um só valor.
O que é a sintaxe blob de oito valores?
border-radius aceita raios horizontais e verticais separados por uma barra «/». Por exemplo, «30% 70% 70% 30% / 30% 30% 70% 70%» dá quatro cantos com raios assimétricos — é isso que cria essas formas orgânicas suaves.
Porquê usar percentagens em vez de pixels?
As percentagens são relativas ao tamanho do elemento: o blob mantém as proporções em qualquer dimensão. Os pixels são melhores para um arredondamento fixo, como um botão ou cartão de cantos constantes.
O border-radius corta o conteúdo?
A borda e o fundo seguem o arredondamento, mas o conteúdo filho pode transbordar. Adicione «overflow: hidden» ao elemento para que imagens e conteúdo sejam cortados pelos cantos arredondados.