Curso de HTML5 e CSS3 Responsivo Aula 12 Criando cantos arredondados com CSS3 utilizando border-radius

Nessa vídeo aula vamos criar cantos arredondados utilizando a propriedade border-radius do CSS3 que nos permite criar bordas arredondadas com facilidade dando charme e elegância a nossos layouts.

Veja no exemplo abaixo como podemos arredondar cada canto separadamente  

border-top-left-radius: 10px
border-top-right-radius: 20px
border-bottom-left-radius: 30px
border-bottom-right-radius: 40px
  • border-top-left-radius para o canto superior esquerdo
  • border-top-right-radius para o canto superior direito
  • border-bottom-right-radius para o canto inferior direito
  • border-bottom-left-radius para o canto inferior esquerdo

Podemos obter o mesmo resultado do código acima arredondando cada canto separadamente em uma única linha veja um exemplo

border-radius: 10px 20px 30px 40px

Podemos arredondar todos os cantos de uma única vez declarando um valor para todos os cantos como no exemplo abaixo

border-radius: 10px

Como podemos ver no exemplo acima, a nossa borda terá 10px de bordas arredondadas, isso quer dizer que todas as 4 bordas terá o valor de 10px.



Hospedagem Profissional de Sites