border-radius aplica cantos arredondados sem exigir imagens ou recursos externos.
Um único valor, como 10px, arredonda os quatro cantos ao mesmo tempo.
É possível informar até quatro valores para tratar cada canto de forma independente.
Cantos retos deixam caixas, botões e imagens com aparência de bloco rígido, e a solução mais comum para suavizar esse visual sem recorrer a imagens prontas é a propriedade CSS border-radius.
Ela arredonda os cantos de qualquer elemento HTML diretamente pelo código, o que evita depender de recursos externos ou de ajustes manuais em editores de imagem.
Este guia mostra, em passo a passo, como aplicar border-radius com um único valor e como controlar cada canto separadamente.
Passo a passo: aplicando border-radius em um elemento
Para começar a usar esse efeito visual, você precisa de um elemento HTML básico na sua tela. Pode ser uma simples caixa colorida feita com a tag div ou até mesmo um botão de formulário.
No seu arquivo de estilo CSS, basta chamar a classe desse elemento e abrir as chaves de edição, onde você deve digitar o comando exato border-radius seguido do valor desejado para a sua curva.
Teste vocacional
Qual carreira combina com o seu perfil?
Responda as perguntas e descubra o curso certo e as bolsas ideais para você!
Se você colocar o valor de 10px, por exemplo, todos os quatro cantos ficarão levemente arredondados.
Como controlar cada canto separadamente no CSS?
Muitas vezes o seu design pede que apenas um ou dois lados do elemento sejam curvos e suaves.
A boa notícia é que o CSS permite controlar cada uma das quatro pontas de forma totalmente individual.
Você pode especificar qual canto exato quer alterar sem afetar a estrutura do restante da sua caixa.
Para fazer isso na prática, você deve usar as seguintes propriedades específicas no seu código:
border-top-left-radius para arredondar o canto superior esquerdo
border-top-right-radius para alterar a ponta superior direita
border-bottom-right-radius para modificar o canto inferior direito
border-bottom-left-radius para ajustar a extremidade inferior esquerda
É possível usar vários valores na mesma linha?
Escrever quatro linhas de código diferentes pode deixar o seu arquivo CSS muito grande e poluído.
Para resolver isso rapidamente, os desenvolvedores experientes usam uma técnica chamada shorthand, em que você escreve o comando principal e passa até quatro valores seguidos separados apenas por um espaço.
O navegador sempre lê e aplica esses valores seguindo o sentido horário tradicional das pontas da caixa.
Qual a diferença entre usar pixels e porcentagens?
Na hora de definir o tamanho da sua curva, as unidades de medida mais usadas são px e a porcentagem.
O uso de pixels cria uma curva totalmente fixa que não muda de proporção com o tamanho da sua tela. É a escolha ideal para pequenos botões de clique ou caixas de texto que precisam de um padrão visual.
Já a porcentagem cria um arredondamento totalmente relativo ao tamanho total do seu elemento base. Essa fluidez é uma boa saída para criar layouts modernos que precisam se adaptar bem em dispositivos móveis.
Como transformar um quadrado em um círculo perfeito?
Criar avatares redondos para fotos de perfil é uma das tarefas mais comuns do desenvolvimento web atual.
Para isso funcionar bem, o seu elemento precisa ter exatamente a mesma largura e altura originais em pixels. Depois, basta aplicar um valor de 50% na borda e o navegador fará todo o restante do trabalho sozinho.
Como começar a estudar programação do zero?
Se você quer se dar o primeiro passo no mercado de tecnologia e aprender uma linguagem de programação, conte com a Allevo Tech.
A plataforma oferece formações práticas em áreas de alta demanda, como Engenharia de Software, Ciência de Dados e Inteligência Artificial.
As trilhas são estruturadas para desenvolver competências técnicas e preparar você para os desafios do mercado de trabalho.
Clique no botão abaixo e conheça as formações da Allevo Tech que podem impulsionar a sua trajetória profissional.
Ver publicações 
