Bordas arredondadas em todos os navegadores
Tempos atrás, sempre era necessário abrir o Photoshop quando era tinhamos vontade de obter aquele efeito de imagens com bordas arredondadas, porém hoje com CSS3 é possível alcançar este efeito facilmente, vejam como
Primeiro precisamos selecionar nossa imagem no DOM, você pode usar o seletor img que selecionaria todas as imagens da sua página, mas creio que não seja esse efeito que você queria não? Então ou você pode adicionar uma class ou um id para essas imagens que ficaria assim
Ou então pode selecionar as imagens dentro de determinada div ou elemento.. Assim:
Na primeira forma você usaria esse CSS para selecionar o elemento
E na segunda esse
Mas isso a maioria ja deve saber, vamos ao que interessa..
A propriedade que faz as bordas ficarem arredondadas é a border-radius, eu não sei como anda sua aceitação nos navegadores antigos, mas acho que nos mais modernos todos ja dão suporte..
No primeiro exemplo poderiamos usar o seguinte código
Assim sua imagem ficaria perfeitamente redonda..
Você pode experimentar os valores até achar um que você goste!
No caso de você precisar de suporte em mais navegadores aqui está uma opção
Mozilla Firefox
Chrome, Safari
Opera, IE9
O título do fórum foi se referindo a imagens, mas você pode usar o efeito em diversos elementos no documento..
Tempos atrás, sempre era necessário abrir o Photoshop quando era tinhamos vontade de obter aquele efeito de imagens com bordas arredondadas, porém hoje com CSS3 é possível alcançar este efeito facilmente, vejam como
Primeiro precisamos selecionar nossa imagem no DOM, você pode usar o seletor img que selecionaria todas as imagens da sua página, mas creio que não seja esse efeito que você queria não? Então ou você pode adicionar uma class ou um id para essas imagens que ficaria assim
- Código:
<img src="#" class="image-rounded" />
Ou então pode selecionar as imagens dentro de determinada div ou elemento.. Assim:
- Código:
<div class="post-images"><img src="#" /><img src="#" /><img src="#" /></div>
Na primeira forma você usaria esse CSS para selecionar o elemento
- Código:
.image-rounded{ /*do something*/ }
E na segunda esse
- Código:
.post-images img{ /*do something*/ }
Mas isso a maioria ja deve saber, vamos ao que interessa..
A propriedade que faz as bordas ficarem arredondadas é a border-radius, eu não sei como anda sua aceitação nos navegadores antigos, mas acho que nos mais modernos todos ja dão suporte..
No primeiro exemplo poderiamos usar o seguinte código
- Código:
.image-rounded{ border-radius: 50%; }
Assim sua imagem ficaria perfeitamente redonda..
Você pode experimentar os valores até achar um que você goste!
No caso de você precisar de suporte em mais navegadores aqui está uma opção
Mozilla Firefox
- Código:
-moz-border-radius: ;
-moz-border-radius-topLeft: ;
-moz-border-radius-topRight: ;
-moz-border-radius-bottomLeft: ;
-moz-border-radius-bottomRight: ;
Chrome, Safari
- Código:
-webkit-border-radius: ;
-webkit-border-top-left-radius: ;
-webkit-border-top-right-radius: ;
-webkit-border-bottom-left-radius: ;
-webkit-border-bottom-right-radius: ;
Opera, IE9
- Código:
border-radius: ;
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;
O título do fórum foi se referindo a imagens, mas você pode usar o efeito em diversos elementos no documento..