Gerador de Border Radius CSS

Como usar

• Escolha a unidade: px para um raio fixo, % para um raio proporcional ao tamanho da caixa.
• Ajuste cada canto, ou deixe os cantos ligados para mudar todos de uma vez.
• Ligue os raios elípticos para controlar a curva na horizontal e na vertical — é assim que se fazem formas orgânicas.
• Comece por um modelo (pílula, círculo, folha, gota, orgânica), se quiser, e copie o CSS.

O código mais curto

O border-radius aceita de um a quatro valores, na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo. A ferramenta usa a menor forma equivalente: "8px" quando os quatro são iguais, "8px 0" quando os opostos se repetem, e assim por diante.

Com raios elípticos, os horizontais vêm antes da barra e os verticais depois: "30% 50% / 30% 30% 50% 50%".

px ou %

Em px, o raio é o mesmo em qualquer tamanho de caixa — o normal para botões e cartões. Em %, ele acompanha a largura e a altura: 50% numa caixa quadrada dá um círculo, e numa retangular, uma elipse.