Gerador de Border Radius CSS
Pré-visualização do raio da borda
Código CSS
.element {
border-radius: 20px;
}
? Perguntas Frequentes
Como funciona o border-radius?
O atributo `border-radius` arredonda os cantos dos elementos. Os valores podem ser pixels, porcentagens ou ems. Você pode especificar todos os cantos de uma vez (`border-radius: 10px`) ou cada canto individualmente (superior esquerdo, superior direito, inferior direito, inferior esquerdo).
Posso criar cantos arredondados elípticos?
Sim! Use dois valores separados por uma barra: border-radius: 50px / 25px. O primeiro valor é o raio horizontal, o segundo é o vertical, criando curvas elípticas em vez de circulares.
Como faço para criar um círculo perfeito?
Defina border-radius: 50% em um elemento quadrado. A porcentagem é relativa às dimensões do elemento; portanto, 50% em um quadrado cria um círculo. Para retângulos, use um valor de pixel grande.
Cada canto pode ter valores de raio diferentes?
Com certeza! Você pode especificar valores diferentes para cada canto: border-radius: 10px 20px 30px 40px (superior esquerdo, superior direito, inferior direito, inferior esquerdo) ou usar propriedades individuais como border-top-left-radius.
Funciona com bordas e preenchimento?
Sim, o border-radius interage com as bordas e o preenchimento. A borda externa segue a borda, enquanto a borda interna se ajusta ao preenchimento. A pré-visualização visual ajuda você a ver como essas propriedades se combinam.
Meus dados estão seguros e protegidos?
Sim, com certeza! Esta ferramenta funciona inteiramente no seu navegador. Todo o processamento de dados ocorre localmente no seu dispositivo — nada é enviado para os nossos servidores. Seus arquivos e dados nunca saem do seu computador, garantindo total privacidade e segurança.