Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bem, criei um layout com imagens com cantos arredondados, pensei que ao aplica-lo em html/css o maior problema seria o IE, porém vem sendo diferente, até agora consegui fazer funcionar em todos os navegadores menos o FF.
Para arredondar no IE utilizei Jquery.
Para arredondar no Chrome utilizei -webkit-border-radius:7px;
Tentei utilizar -moz-border-radius:7px; para arredondar no FF , mais parece que ele só aceita essa propriedade para bordas de imagens e divs, ele não arredonda os cantos da imagem. Sabem como resolver isso.
Link : www.gcr.6te.net
tipo, isso funciona com divs, mais não com imagens. Eu queria saber um modo de fazer com imagens, já consegui em todos os navegadores menos o FF
jquery não é uma alternativa? xD
Dei uma pequena googlada: http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/
Não sei se funciona como quer, por o seu real problema é a grossura da borda, se a borda fosse 1 ou 2 isso não estaria acontecendo..
Ué, e porque não envolve as imagens em uma div então?
Gebezin, já uso jQuery pra arredondar, só que só funciona no IE.
Evandro, não funciona, olhe o exemplo: http://randal.6te.net/teste.php >> não funciona arredondado no FF
cara... usa jQuery para todos... não use as regras proprietárias.. apenas use jQuery para arredondar em todos os navegadores.
mostre como você tentou fazer, que 'só funcionou jQuery no IE'
http://www.malsup.com/jquery/corner/
utilizei esse plugin para arredondar
No código existe essa linha
noBottomFold = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8),
não foi resolvido
então pessoal , só falta isso pra mim terminar o site.
Preciso conseguir arrendondar os cantos de uma <img> no Firefox, já consegui em todos os outros navegadores. Estou a procura de uma solução Jquery.
Eu tive esse problema uma vez, depois de pensar um pouco eu fiz o seguinte.
Criei uma tabela de 3 colunas e 3 linhas e coloquei imagens de fundo em cada uma delas.
tá aqui o codigo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de conteiner com bordas arredondadas.</title>
</head>
<body style="background-color: #069;">
<table style="border-collapse: collapse; margin: 5px 0px 0px 0px;">
<tr>
<td style="width: 25px; height: 28px; background-image: url(esquerda_cima.png);"></td>
<td style="background-image: url(cima.png);"></td>
<td style="width: 28px; background-image: url(direita_cima.png);"></td>
</tr>
<tr>
<td style="background-image: url(esquerda.png);"></td>
<td style="background-image: url(centro.png); padding: 0px; width: 500px; text-align: justify;">
'Afirmações extraordinárias requerem evidências extraordinárias'*. Por
exemplo, se eu digo que estou escrevendo este glossário usando um teclado
bege, poucos pedirão evidência desta afirmação nada extraordinária. Mas se
eu disser que estou escrevendo este glossário através de telepatia, qualquer
pessoa normal duvidará e pedirá evidência extraordinária. É um mandamento de
bom-senso, e contrapõe um argumento comum dos crédulos de que os céticos
duvidam de tudo.
</td>
<td style="background-image: url(direita.png);"></td>
</tr>
<tr>
<td style="height: 28px; background-image: url(esquerda_baixo.png);"></td>
<td style="background-image: url(baixo.png);"></td>
<td style="background-image: url(direita_baixo.png);"></td>
</tr>
</table>
</body>
</html>Aqui você pode baixar meu exemplo com as imagens, assim você pode ver como ficou
Eita, tabela?!
Bom, o plugin do Methvin (malsup.com) funcionou normalmente por aqui, em testes. Tente rever seu código, pois com um mouseover nas imagens, a borda está ficando arredondada sim.
Alkaeda, eu quero as imagens arredondadas, não só a borda delas, se você der uma olhada no link utilizando IE8 ou Chrome verá qual o meu objetivo.Nos outros navegadores está perfeito, só não funcionou no FF, e é essa solução que estou esperando.
Link : www.gcr.6te.net
Bruno Caxito
Já pensei nessa solução também, mais utilizar divs com background-images puxando as imagens de um banco de dados não me parece muito semantico.
Randal, acho que me expressei mal. Quando falei borda, estava me referindo ao extremo da imagem.
Olha o teste que fiz http://img716.imageshack.us/img716/3831/testeround.jpg . Nele, no evento mouseover parece estar certo a configuração, pois a borda está interna, então quem está recebendo o canto arredondado é a imagem mesmo. Por isso disse para reler o seu código, pois parte dele está funcionando.
O Firefox NÃO ARREDONDA cantos de imagens, apenas o chrome atualmente faz isso.
Já tentei todas as gambiarras possíveis, como overflow: hiden, mas nada funciona...
O jeito é apelar para o Javascript mesmo...
http://www.malsup.com/jquery/corner/
utilizei esse plugin para arredondar, mais s[o funcionou para o IE o arredondamento, como fazer funcionar no FF ?
Boa tarde,
Olha eu testei o plugin (jQuery Corner) em vários navegadores (Firefox, Internet Explorer (6,7,8), Chrome, Safari e Ópera) e todos corresponderam ao esperado, ou seja, cantos arredondados na imagem.
O código que utilizei foi este:
Links para o Jquery e para o Jquery Corner
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js)
</script>
<script type="text/javascript" src="[http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.06">](http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.06)
</script>Javascript (Jquery)
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("10px");
});
</script>CSS
<style type="text/css">
#imgBox, #imgBox img { width:276px; height:135px; margin:0;padding:0; }
</style>
XHTML
<div id="imgBox">
<img src="imagem.jpg" width="276" height="135" alt="foto" />
</div>Espero que ajude.
ultilizo tbm esse plugin que o angelo postou,vai por ele que funciona!!
ele até arredonda bordas de uma div que contem um swf!!
grande abraço! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
randal.maia está funcionando no FF sim! Acabei de testar!
Valeu galera! Resolvido!
faltava essa linha no meu js
$.fn.corner.defaults.useNative = false;
Adicionei ela, acertei meu css e ficou perfeito.
Obrigado a todos
Bom, você quer fazer uma borda sem hover, arredondada?
Se sim, tenta isso:
-moz-border-radius:7px;border: 1px solid white; /A mesma cor do fundo /
Caso contrário, não sei.