Faça cantos arredondados com CSS 3

Se você criou uma caixa com cantos arredondados usando versões anteriores do CSS, imagens e tabelas HTML, você sabe o que é uma dor que era - como você tinha que criar quatro imagens (uma para cada canto), e como você teve que ajustar com cuidado tudo de modo que os cantos alinhados só então.

Querendo ou não você tentou a técnica antiga, você está certo para apreciar o quanto mais fácil a criação de cantos arredondados é quando você usa a propriedade CSS 3 border-radius.

Quando você usa border-radius, especificar o comprimento do seu raio, como o valor para criar os cantos arredondados. Você pode então fazer seus cantos arredondados como arredondado como você gosta, e você pode aplicar o estilo a qualquer ou a todos os cantos de uma caixa. Aqui você pode ver um diagrama desenhado para ajudá-lo a ver como a alteração do raio muda o canto curvado.

Você pode aplicar border-radius a qualquer objeto de caixa, como um tag ou um tag. Aqui está a sintaxe para criar cantos arredondados em CSS 3 para navegadores WebKit (note que r representa raio, a distância a partir do centro de um círculo com o canto curvo):

-webkit-border-radius: r Length-

Se você deseja especificar um raio diferente para cada canto, seu estilo pode parecer mais com o seguinte trecho de código. Nesta figura, você ver como os valores mudam se o canto arredondado só é aplicada ao cantos esquerdo inferior direito superior e:

-webkit-border-top-esquerda; radius: 0 --webkit-border-top direita; radius: 25px; -webkit-border-bottom-direita; radius: 0 - webkit-border-bottom-esquerda; radius: 25px ;

Você pode ter ainda mais controle sobre o raio se você especificar dois valores para o raio, como este:

-webkit-border-radius: 50px 100px;

No próximo exemplo mostrado, uma altura da fonte de arredondamento foi adicionado à caixa de modo a que ele permaneça em escala com o texto. Ao usar a unidade em como nossa unidade de medida, podemos manter o projeto em escala tanto no iPhone e iPad. Esta é uma prática útil quando você quiser adicionar cantos arredondados em torno de um elemento de texto, como um título:

-webkit-border-radius: 1em-

No exemplo também foi usado uma sombra e um gradiente. Você pode adicionar sombras utilizando CSS 3.