O que é Border Radius?
O Border Radius é uma propriedade CSS que permite arredondar os cantos de um elemento HTML, como uma caixa ou uma imagem. Com o Border Radius, é possível criar bordas suaves e arredondadas, adicionando um toque de estilo e elegância aos elementos de uma página da web.
Como funciona o Border Radius?
O Border Radius funciona definindo um valor para o raio do arredondamento dos cantos de um elemento. Esse valor pode ser especificado em pixels, porcentagem ou em outras unidades de medida suportadas pelo CSS. Ao aplicar o Border Radius a um elemento, os cantos desse elemento serão arredondados de acordo com o valor definido.
Exemplos de uso do Border Radius
O Border Radius pode ser aplicado a diversos elementos HTML, como caixas de texto, botões, imagens e divs. Veja alguns exemplos de uso:
1. Arredondando cantos de uma caixa de texto
Para arredondar os cantos de uma caixa de texto, basta aplicar a propriedade Border Radius ao elemento que a contém. Por exemplo:
.caixa-de-texto {
border-radius: 10px;
}
Com esse código, os cantos da caixa de texto serão arredondados em um raio de 10 pixels.
2. Arredondando cantos de um botão
O Border Radius também pode ser usado para arredondar os cantos de um botão, deixando-o com uma aparência mais suave. Por exemplo:
.botao {
border-radius: 50%;
}
Nesse caso, o botão terá todos os cantos arredondados em um raio de 50%, resultando em uma forma circular.
3. Arredondando cantos de uma imagem
É possível aplicar o Border Radius a uma imagem para arredondar seus cantos. Por exemplo:
.imagem {
border-radius: 20px;
}
Com esse código, a imagem terá os cantos arredondados em um raio de 20 pixels.
4. Arredondando cantos de uma div
Além de caixas de texto, botões e imagens, o Border Radius também pode ser aplicado a divs, permitindo criar elementos com cantos arredondados. Por exemplo:
.minha-div {
border-radius: 5%;
}
Nesse caso, a div terá todos os cantos arredondados em um raio de 5% do tamanho da própria div.
Considerações finais
O Border Radius é uma propriedade CSS poderosa que permite adicionar um toque de estilo e elegância aos elementos de uma página da web. Com ele, é possível criar bordas suaves e arredondadas, tornando a experiência do usuário mais agradável. Experimente utilizar o Border Radius em seus projetos e veja como ele pode fazer a diferença no design de suas páginas.