Saudações galera da rede.
Hoje vamos aprender como fazer bordas arredondadas.
Vamos aprender como fazer bordas em arredondadas em todos os navegadores inclusive o temido Internet Explorer.
Todo mundo quer sempre colocar bordas redondas, até porque é mais bonita e não precisa colocar imagens para arredondar as bordas, evitando assim, que a paginas demore a carregar em conexões lentas.
Agora vamos aprender a colocar bordas em círculos normais e depois em imagens.
Para círculos normais:
#box{ --------------------à Nome da Div
width:500px; -----------------------à Largura
height:500px; ----------------------à Altura
border:1px solid #090; ---------à Borda(1px àEspesura da borda, solid à tipo de borda, #090 à cor da borda.
-moz-border-radius:5px; ----à esta borda tem que ser utilizada para funcione no Mozilla
-webkit-border-radius:5px; --à esta borda é para o temido Internet Explorer
border-radius:5px; -----------à esta borda é para o Chrome e outros navegadores
}
Aprendemos como criar bordas arredondas normal, agora vamos aprender como criar bordas para as imagens, ou seja, arredondar as imagens.
#box img{ -----------------à o IMG significa que você estar atacando a imagem
-moz-border-radius:5px; ----à esta borda tem que ser utilizada para funcione no Mozilla
-webkit-border-radius:5px; --à esta borda é para o temido Internet Explorer
border-radius:5px; -----------à esta borda é para o Chrome e outros navegadores
}
OBS: Lembre-se, você pode colocar uma borda na imagem adicionando apenas o border:1px solid #CCC.
OBS1: Nos outros posts vou ensinar como arredondar somente um lado da imagem ou quadrado.
Espero que tenham gostado.
Até a próxima.