Gerador de Border Radius
O gerador de border-radius CSS define cada canto de um elemento em porcentagem com controles deslizantes individuais ou um único controle para todos os cantos, inclui presets como círculo, folha e blob, e copia o CSS.
Sobre esta ferramenta
O gerador de border-radius CSS define cada canto de um elemento em porcentagem com controles deslizantes individuais ou um único controle para todos os cantos, inclui presets como círculo, folha e blob, e copia o CSS.
Como usar
- Arraste os controles de cada canto ou use Todos os cantos.
- Experimente um preset como Círculo, Folha ou Blob.
- Altere o tamanho da prévia, se precisar.
- Clique em Copiar CSS.
Bom saber
- border-radius aceita até quatro valores na ordem superior esquerdo, superior direito, inferior direito e inferior esquerdo.
- border-radius: 50% em um elemento quadrado cria um círculo.
- Raios em porcentagem acompanham o tamanho do elemento; raios em pixels ficam fixos.
- Raios diferentes em cantos opostos criam formas de folha e blob sem nenhum SVG.
- border-radius é compatível com todos os navegadores atuais, sem prefixos.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como fazer cantos arredondados em CSS?
Defina border-radius, por exemplo border-radius: 12px; para todos os cantos, ou quatro valores para cantos individuais.
Como fazer um círculo com CSS?
Dê ao elemento largura e altura iguais e border-radius: 50%.
Em que ordem ficam os quatro valores de border-radius?
Superior esquerdo, superior direito, inferior direito, inferior esquerdo: no sentido horário a partir do canto superior esquerdo.
Devo usar px ou % no border-radius?
Use px para cantos de tamanho uniforme em botões e cards; use % para formas como círculos e blobs que acompanham o tamanho do elemento.