Bordas Arredondadas Sem Imagens

flavio · Setembro 22, 2007

Numa pesquisa, nosso amigo Hailton encontrou este tutorial que ensina a fazer bordas arredondadas sem o uso de imagens. Muito bom.

http://http://www.codigofonte.com.br/codig...tilizar-imagens

Valews!

Editado Fevereiro 1, 2009 por flavio

hipnos na area · Novembro 23, 2007

eu procurei bordas arredondadas em CSS

porem a maioria funcionava em determinado navegador e em outro não

(testado no windows)

<html>
<head>
<title>border-radius</title>
<style>
#ex1 {
  border:2px #000 solid;
  -webkit-border-radius: 15px;/*safari*/
  -khtml-border-radius: 15px;/*safari()*/
  -moz-border-radius: 15px;/*mozilla complacentes(FF,Moz,NetScap)*/
  -opera-border-radius: 15px;
  border-radius: 15px;/*CSS3 ainda não foi lançado que eu saiba hehehe*/
  height:50px;
}
</style>
</head>
    <body>
        <div id="ex1">
        conteudo
        </div>
    </body>
</html>

no IE o maximo que cheguei foi nisso o FIELDSET: <fieldset style='height:50px;'>blabla</fieldset>

não achei nada pro opera -.- fiquei complicado mas por sorte na procura da "solução para min-width no IE" achei esse sem querer as BORDAS "arredondadas"(na verdade ta mais pra uma gambiarra) ele é meio grande para aplicar mas pelo menos funcionou em varios navegadores

testado:FF,opera,ie,safari e netscap(windows)

<style>
.b1 {
height:1px;
font-size:1px;
background:#aaa;
margin:0 5px;
}
.b2 {
height:1px;
font-size:1px;
background:#fff;
border-right:2px solid #aaa;
border-left:2px solid #aaa;
margin:0 3px;
}
.b3 {
height:1px;
font-size:1px;
background:#fff;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
margin:0 2px;
}
.b4 {height:2px;
font-size:1px;
background:#fff;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
margin:0 1px;
}
.b5 {
border-left:1px solid #aaa;
border-right:1px solid #aaa;
display:block;
}
</style>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5">
texto<br>
texto<br>
texto<br>
texto<br>
texto<br>
texto<br>
texto<br>
</div>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>

é só uma dica acaso alguém tenha uma solução "menor" ou melhor aplicada

posta ae

abraço

Editado Novembro 24, 2007 por hipnos na area

Entrar

Bordas Arredondadas Sem Imagens

Pergunta

flavio

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

hipnos na area

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades