Introdução
A propriedade border radius é utilizada para arredondar os cantos de um elemento HTML com o CSS.
Utilizando esta propriedade é possível arredondar todos os cantos de uma vez, o elemento todo, ou então um canto por vez.
Com o border radius da para criar círculos, retângulos com bordas arredondadas, balões de conversa como em chat e entre outros.
Sobre a propriedade
A sua sintaxe é bem simples, e chega a ser parecida com outras como o padding, onde é possível definir um valor geral, ou para todos os lados de uma só vez.
border-radius: 25px;
Utilizando dessa forma, será arredondado todos os cantos.
border-radius: 25px 0px;
Dessa outra forma, será arredondado o canto superior esquerdo e o inferior direito.
border-radius: 25px 0px 25px 25px;
Dessa outra forma, só o canto superior direito não será arredondado.
A regra do border radius é:
- Valor 1: Canto superior esquerdo
- Valor 2: Canto superior direito
- Valor 3: Canto inferior direito
- Valor 4: Canto inferior esquerdo
Basicamente você pode entender que os valores a se aplicar, começa no canto superior esquerdo e vai girando no sentido horário, é uma boa forma de decorar.
Arredondamento suave
Para arredondar só um pouco as bordas de um elemento, você poderá analisar conforme o tamanho do elemento, mas você pode começar sempre aplicando um valor pequeno para ver se faz sentido ao seu elemento.
Por exemplo, para um arredondamento suave, coloco um valor bem abaixo do width, veja:
<div id="exemplo1"></div>
#exemplo1 {
border: 2px solid red;
padding: 10px;
border-radius: 10px;
width: 100px;
height: 70px;
}
Repare que o valor do border-radius é bem menor que o width, e isso faz com que fique um leve arredondamento.
Sempre procure achar essa proporção entre tamanho do elemento, com o tamanho do arredondamento desejado, para criar um efeito legal.
Criando um círculo
Para criar um círculo com o border radius, primeiramente é necessário que o elemento seja um quadrado perfeito.
A partir disso, é possível colocar o border-radius como 50%, que já irá fazer o efeito correto do circulo:
<div id="exemplo2"></div>
#exemplo2 {
border: 2px solid red;
padding: 10px;
border-radius: 50%;
width: 100px;
height: 100px;
}
Balão de conversa de chat
Este é um efeito que parece muito difícil de implementar, porém é bem simples.
Normalmente esse efeito é criado fazendo com que três bordas sejam arredondadas, e uma delas não seja, dando a impressão do balão de conversa:
<div id="exemplo3"></div>
#exemplo3 {
margin-top: 15px;
border: 2px solid red;
padding: 10px;
border-radius: 30px 30px 0px 30px;
width: 300px;
height: 70px;
}
E para fazer o efeito do outro lado:
<div id="exemplo4"></div>
#exemplo4 {
margin-top: 15px;
border: 2px solid red;
padding: 10px;
border-radius: 30px 30px 30px 0px;
width: 300px;
height: 70px;
}
Dessa forma, daria para adicionar um texto dentro desse balão, também daria para ajustar um pouco o estilo e perfeitamente se encaixaria em um chat.
Botão arredondado
Outro efeito que gosto de utilizar bastante é o botão com formato mais arredondado nas pontas.
Esse efeito pode combinar bastante dependendo do estilo que estiver utilizando:
<button id="exemplo5">Salvar</button>
#exemplo5 {
background-color: red;
color: white;
margin-top: 15px;
padding: 10px;
border: 0px;
border-radius: 30px;
width: 150px;
height: 50px;
font-size: 16px;
}
Código fonte
O código fonte desse conteúdo está no meu CodeSandbox, e você pode acessar neste link.
Para ver outros canais onde o posto conteúdo sobre CSS veja os Links do Programando Soluções.
Conclusão
A propriedade border radius é uma propriedade muito útil do CSS, e saber utilizar pode ajudar demais.
É possível criar desde efeitos mais simples, até efeitos um pouco mais sofisticados, deixando o layout bem interessante.
E isso faz o border radius ser uma propriedade bem versátil.
Referências
https://www.w3schools.com/cssref/css3_pr_border-radius.asp
https://www.devmedia.com.br/css-border-radius/36825
https://acervolima.com/css-propriedade-border-radius/