ela é muito simples, porém ajuda muito os desenvolvedores, com essa propriedade não é mais necessário a criação de imagens com as pontas aredondadas, deixando assim o site mais leve e mais rápido.
O primeiro passo é saber a propriedade:
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; |
Dessa forma todas as pontas ficarão com 20 px de borda.
Você também pode deixar cada ponta com um radio diferente desta forma:
-webkit-border-radius: 20px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 20px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; border-radius: 20px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; |
Dessa forma todas as pontas ficarão com 20 px de borda porém "-top-right-" o topo direito e a "-bottom-left-" base esquerda com 5px.
Uma forma bem fácil de criar essas bordas é com o site http://border-radius.com/
ou aprender mais no site
Sites de apoio:
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
http://border-radius.com/
0 comentários:
Postar um comentário