Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Gerador de bordas arredondadas CSS
Ajuste os quatro cantos juntos ou separadamente, visualize curvas elípticas e exporte border-radius.
Cantos elípticos
Prévia
CSS
Sobre a ferramenta
Compare cantos circulares e elípticos para botões, cartões ou distintivos.
Como usar
Escolha px ou % e use os controles ou os campos numéricos para ajustar os raios. Os quatro cantos começam vinculados; desvincule para editar cada um. Nas opções elípticas, ative raios verticais independentes para separar a curvatura horizontal da vertical.
Os valores vão de 0–500 px ou 0–100%. A prévia e a declaração copiada ou baixada usam os mesmos números. Percentuais dependem das dimensões reais do elemento. Trocar a unidade muda a interpretação dos valores, sem preservar necessariamente o tamanho visual.
Perguntas frequentes
O que significa a barra em border-radius?
Antes dela ficam os raios horizontais; depois, os verticais. CSS reduz proporcionalmente raios sobrepostos para que caibam na caixa.
Por que 50% cria uma elipse em vez de um círculo?
Os raios percentuais usam a largura e a altura separadamente. Com 50%, uma caixa retangular vira uma elipse; para formar um círculo, largura e altura precisam ser iguais. Use pixels quando quiser raios fixos e confira o CSS nas dimensões reais do seu elemento.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0