Propriedade border-radius
A propriedade border-radius permite moldar as bordas de elementos. Essa propriedade é amplamente utilizada para criar cantos arredondados, círculos e diversas formas sem a necessidade de inserir imagens.
Sintaxe
A sintaxe da propriedade border-radius envolve a definição de valores para cada um dos quatro cantos do elemento.
.elemento {
border-radius: 10px; /* Cantos arredondados com raio de 10 pixels para todos os cantos */
}Cantos individuais
É possível definir raios diferentes para cada canto do elemento, proporcionando uma personalização mais detalhada.
.elemento {
border-radius: 10px 5px 20px 15px; /* Top-left: 10px, Top-right: 5px, Bottom-right: 20px, Bottom-left: 15px */
}Atalhos
A propriedade border-radius também oferece atalhos para definição de valores, simplificando a aplicação, especialmente quando todos os cantos devem ter o mesmo raio.
.elemento {
border-radius: 15px 10px; /* Top-left e Bottom-right: 15px, Top-right e Bottom-left: 10px */
}Formas específicas
Além disso, é possível criar formas específicas, como círculos, utilizando valores de porcentagem.
.elemento {
border-radius: 50%; /* Transforma o elemento em um círculo perfeito */
}Note
Lembrando que para criar uma figura de círculo o elemento deve ter a altura e largura de mesmo tamanho, ou seja, deve ser um quadrado.