border-radius: 16px;O gerador de raio de borda CSS é um editor visual para a propriedade CSS Border-Radius. Você arrasta um controle deslizante para cada canto, assiste a uma rodada de elementos de visualização em tempo real e copia o CSS exato que ele produz - sem adivinhar os valores dos pixels e recarregar a página.
A propriedade Border-Radius parece simples, mas possui uma abreviação compacta que leva as pessoas para cima: um valor arredonda todos os quatro cantos, dois valores definem as duas diagonais e quatro valores são executados no sentido horário a partir do canto superior esquerdo. Esta ferramenta permite definir cada canto independentemente e, em seguida, produz a taquigrafia equivalente mais curta automaticamente, para que seu CSS permaneça limpo.
Tudo é executado no seu navegador. Comece com um preset como cartão, pílula, círculo ou blob, ajuste cada canto, troque a unidade entre pixels e porcentagens e copie a declaração. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.
Escolha uma predefinição como arredondada, pílula, círculo ou blob para um ponto de partida instantâneo ou comece a partir dos cantos arredondados padrão.
Arraste os controles deslizantes superiores esquerdo, superior direito, inferior direito e inferior esquerdo para arredondar cada canto independentemente ou defina-os com o mesmo valor para um raio uniforme.
Alterne entre PX, %, EM e REM. As porcentagens criam cantos elípticos em relação ao tamanho do elemento — defina 50% em todos os cantos para fazer um círculo ou elipse perfeito.
Copie a declaração gerada do raio de borda, já recolheda para a abreviação válida mais curta e cole-a na folha de estilo.
Os controles deslizantes independentes para todos os quatro cantos permitem que você construa formas assimétricas, como raios de folha, tabulação e bolha de fala, não apenas arredondamento uniforme
A ferramenta recolhe seus quatro cantos para o menor valor equivalente de bordas, mantendo seu CSS limpo e legível
Alternar entre PX, %, EM e REM — as porcentagens produzem cantos elípticos em relação ao tamanho da caixa, que é como os círculos e blobs são feitos
Um elemento de visualização é atualizado instantaneamente enquanto você arrasta, para que você possa ver exatamente como os cantos se arredondam antes de copiar qualquer coisa
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!