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/
Written by Unknown
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 comentários:
Postar um comentário