Utilização da propriedade Border-radius nos navegadores

[DiF]

bom, estou deixando aqui uma informação um tanto útil, sobre uma das propriedades legais do CSS3: arredondamento de cantos em uma div.

Ja vi gente aqui com dificuldade de arredondar cantos, e por solução acabava optando por usar imagens nos 4 cantos e tendo que posicionar no css e com isso acabava deixando a pagina um "poquinho" mais pesadinha... porque qto menos imagens utilizar melhor, na minha opinião. então com base nisso o que puder fazer com CSS ao invés de imagem fica melhor.

Como sabemos.. ( ou não) os navegadores são distintos em se tratando de renderizações de algumas propriedades do CSS então deixo aqui uma tabelinha de equivalência do atributo border-radius para os navegadores Mozilla Firefox, chrome, safari, opera e IE9.

Mozilla Firefox:

-moz-border-radius: arredonda os quatro cantos

-moz-border-radius-topLeft: arredonda o canto superior esquerdo

-moz-border-radius-topRight: arredonda o canto superior direito

-moz-border-radius-bottomLeft: arredonda o canto inferior esquerdo

-moz-border-radius-bottomRight: arredonda o canto inferior direito

Chrome, Safari:

-webkit-border-radius: arredonda os quatro cantos

-webkit-border-top-left-radius: arredonda o canto superior esquerdo

-webkit-border-top-right-radius: arredonda o canto superior direito

-webkit-border-bottom-left-radius: arredonda o canto inferior esquerdo

-webkit-border-bottom-right-radius: arredonda o canto inferior direito

Opera, IE9:

border-radius: arredonda os quatro cantos

border-top-left-radius: arredonda o canto superior esquerdo

border-top-right-radius: arredonda o canto superior direito

border-bottom-left-radius: arredonda o canto inferior esquerdo

border-bottom-right-radius: arredonda o canto inferior direito

exemplo de aplicação do atributo em uma div:

CSS:

#cantosArredondados{
   position: absolute;
   top: 20%;
   left: 20%;
   width: 200px;
   height: 200px;
   display: block;
   background-color: blue;
   [COLOR="Red"]-moz-border-radius: 20px;   
   -webkit-border-radius: 20px;
   border-radius: 20px;[/COLOR]
}

.bottomRounded{
 position: absolute;
   top: 20%;
   left: 40%;
   width: 200px;
   height: 200px;
   display: block;
   background-color: red;
   [COLOR="Red"]-moz-border-radius-bottomLeft: 20px;   
   -moz-border-radius-bottomRight: 20px;   
   -webkit-border-bottom-left-radius: 20px;
   -webkit-border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;[/COLOR]

}

HTML:

<div id="cantosArredondados"></div>
<div class="bottomRounded"></div>

[Bisk8]

Muito esclarecedor, obrigado pela contribuição!

Queria saber se é possível aplicá-las em imagens e como?

Abraços!

[DiF]

Queria saber se é possível aplicá-las em imagens e como?

Abraços!

Bom, para imagens inicialmente não seria aplicável.. pois ele arrededonda os cantos da div.. mas pode ser que funcione se você arredondar os cantos da div e setar a imagem como background-image. nao testei.. se funciona posta que isso também me interessou agora. rsrs nao tinha pensado em tentar arredondar cantos de imagens com esta propriedade.. uma vez que sempre utilizei o photoshop para arredondamento de cantos de imagens.

se funcionar.. será muito útil rsrs

[hallaor]

putz.. passi o dia hj tentando fazer isso no meu site, mas pro ie8 nao consegui... ¬¬

[DiF]

putz.. passi o dia hj tentando fazer isso no meu site, mas pro ie8 nao consegui... ¬¬

lembrando amigo, que estas sao tags de CSS3. o IE8 nao possui suporte ao CSS3. para isso você deve pesquisar um arquivo feito em javascript que faz um tipo de hack. ja o vi em algum lugar..mas nao cheguei a salvar... é um arquivo que você importa dentro do css... que ai faz o IE8 interpretar as tags do CSS3.

o CSS3 é apenas suportado nativamente pelo Mozilla Firefox4, opera, chrome, safari e IE9

[Bisk8]

Bom, para imagens inicialmente não seria aplicável.. pois ele arrededonda os cantos da div.. mas pode ser que funcione se você arredondar os cantos da div e setar a imagem como background-image. nao testei.. se funciona posta que isso também me interessou agora. rsrs nao tinha pensado em tentar arredondar cantos de imagens com esta propriedade.. uma vez que sempre utilizei o photoshop para arredondamento de cantos de imagens.

se funcionar.. será muito útil rsrs

não funcionou, mas a ideia parecia boa:lol:, valeu!

[DiF]

amigo, funciona sim. acabei de testar aqui... como você aplicou?

faça desta maneira:

HTML:

<div id="teste"></div>

CSS:

#teste{ 
   width: 200px;
   height: 200px;
   display: block;
   background-image: url(imagem.jpg);
   background-repeat: no-repeat;
   background-size: auto;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px; 
}

no exemplo do background.. coloquei a imagem na mesma pasta do projeto.. ou seja no root.

funciona porque eu testei.

[Will702]

Cara,salvou meu final de semana!

Estava pesquisando isso mesmo,e vi que ia ter que fazer com imagens.Ai antes de começar,vim da uma volta no fórum e você me salva com 3 linhas!

valeu hein.

E pros que disseram que nao funciana,verifica na tabela o código referente ao seu navegador.Pro meu rodar em todos eu tive que add as 3 linhas referente aos navegadores e funciona perfeitamente.E eu estou usando em uma menu <li>

valeu ae dif

[DiF]

exato will, para funcionar em todos os navegadores citados... tem que colocar as tags referentes ao navegador. e só uma coisa.. esta tecnica nao funciona em navegadores mais antigos. por se tratar deu uma propriedade nova do css3.

[Bisk8]

Consegui agora, eu tava fazendo besteira antes! sou iniciante neste assunto!

Valeu dif.