Gerador de border-radius CSS
Defina o raio de cada canto, em px ou %, e copie o border-radius na forma mais curta, com prévia.
- Roda no seu navegador
Carregando a ferramenta…
Ordem dos valores no shorthand
O border-radius lê de 1 a 4 valores, em sentido horário a partir do canto superior esquerdo: superior esquerdo, superior direito, inferior direito e inferior esquerdo. Os que faltam são completados pelos anteriores.
| Valores escritos | Como o navegador lê |
|---|---|
| 1 | os quatro cantos iguais |
| 2 | 1º: superior esquerdo e inferior direito; 2º: superior direito e inferior esquerdo |
| 3 | superior esquerdo; superior direito e inferior esquerdo; inferior direito |
| 4 | um valor por canto |
A ferramenta devolve a menor forma que dá o mesmo resultado e escreve zero sem unidade:
| Raios (sup. esq., sup. dir., inf. dir., inf. esq.) | Resultado |
|---|---|
| 8, 8, 8, 8 | border-radius: 8px; |
| 8, 8, 0, 0 | border-radius: 8px 8px 0 0; |
| 10, 20, 10, 20 | border-radius: 10px 20px; |
| 10, 20, 30, 20 | border-radius: 10px 20px 30px; |
| 1, 2, 3, 4 | border-radius: 1px 2px 3px 4px; |
Pixels, porcentagem e raios grandes
Em px o raio é fixo; em porcentagem acompanha o elemento. Um quadrado vira círculo e um retângulo, elipse. Se os raios somados passarem do tamanho do lado, o navegador os reduz na mesma proporção; por isso um raio enorme em botão baixo dá cantos totalmente redondos. Com 50 nos quatro cantos o resultado é border-radius: 50%;
O que a ferramenta não faz
- Cada canto aceita de 0 a 1000, em uma só unidade (px ou %) para os quatro.
- Não gera raio elíptico (com barra entre os valores), em que o raio horizontal difere do vertical.
- A prévia usa uma amostra fixa; em % o efeito real depende do seu elemento.
Perguntas frequentes
Como usar o gerador de border radius para arredondar só o topo?
Coloque o raio nos dois cantos de cima e deixe 0 nos de baixo. Com 8, 8, 0 e 0 o resultado é border-radius: 8px 8px 0 0;
O gerador de border radius faz círculo?
Faz, em porcentagem: em elemento quadrado vira círculo e em retangular, elipse. Com 50 nos quatro cantos o resultado é border-radius: 50%;