Borda Css

[MadPatryk]

Galera, alguém sabe como fazer essa borda em css igual a da imagem abaixo(imagem do site do yahoo...) que esta marcada com a bolinha vermelha!

valeus!

[Crystian]

A imagem não está aparecendo...

Mas acredito q com um border: 1px solid #FF0000; você consiga colocar borda da mesma forma q o yahoo.

[Guest Guest]

não... não é isso que eu quero não...

eu keria era saber como faz bordas arredondadas!

lembrei o nome!!!

tipo, com imagens e sem imagens se não for pedir d+!!!

valeus cara!

[MadPatryk]

opa!

esse ai kem postou foi eu!!!

eskeci de logar! !!!

[Crystian]

isso somente com imagens, com css nunca vi...

[MadPatryk]

tem sim!!!

eu tava fazendo um aki cara! a partir do code de um amigo meu... tem uns 500.0000.0000 divs!!! mas é sem imagens!!! heheheh

olha só o code mano

<style type="text/css">
#curve1
{
	font:9px Verdana, arial, georgia, sans-serif;
	width: 200px;
	height: auto;
	float: left;
	background-color : transparent;
	margin: 5px 5px 10px 10px;
}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12
{
	font:1px/1px verdana, arial, georgia, sans-serif;
	padding: 0px 0px 0px 0px;
	height:1px;
	background-color : #00f;
}

.c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12
{
	border-right: 1px solid #00f;
	border-left: 1px solid #00f;
}

.c1
{
	margin: 0px 12px 0px 12px;
	border-right: 3px solid #00f;
	border-left: 3px solid #00f;
}

.c2
{
	margin: 0px 8px 0px 8px;
}

.c3
{
	margin: 0px 6px 0px 6px;
}

.c4
{
	margin: 0px 5px 0px 5px;
}

.c5
{
	margin: 0px 4px 0px 4px;
}

.c6
{
	margin: 0px 3px 0px 3px;
}

.c7
{
	margin: 0px 2px 0px 2px;
}

.c8
{
	margin: 0px 2px 0px 2px;
	border-right: none;
	border-left: none;
}

.c9
{
	margin: 0px 1px 0px 1px;
}

.c10
{
	margin: 0px 1px 0px 1px;
	border-right: none;
	border-left: none;
}

.c11
{
	margin: 0px 0px 0px 0px;
}

.c12
{
	font:11px/17px verdana, arial, georgia, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	border-right: none;
	border-left: none;
	height:auto;
}
</style>

<div id="curve1">
<div class="c1"> </div> <div class="c2"> </div><div class="c3"> </div><div class="c4"> </div>
<div class="c5"> </div><div class="c6"> </div><div class="c7"> </div><div class="c8"> </div>
<div class="c9"> </div><div class="c10"> </div><div class="c11"> </div><div class="c11"> </div>
<div class="c11"> </div>
<div class="c12">
Teste de Bordas Arredondadas SEM IMAGENS!!!!
</div>
<div class="c11"> </div>
<div class="c11"> </div><div class="c10"> </div><div class="c9"> </div>
<div class="c8"> </div><div class="c7"> </div><div class="c6"> </div><div class="c5"> </div>
<div class="c4"> </div><div class="c3"> </div><div class="c2"> </div><div class="c1"> </div>
</div>

espero que ajude a algumas pessoas ai!

ah, eu só não to conseguindo, é fazer com que a altura seja menor...

c me ajuda?

eu achei que ficou muito grande mas não to conseguindo diminuir a altura!

valeus!

[OSJunior]

Olá, eu tentei esse código abaixo, e o único jeito de diminuir a altura é reduzir o numero de c's

<style type="text/css">
#curve1
{
font:8px Verdana, arial, georgia, sans-serif;
width: 200px;
height: 20px;
float: center;
background-color : transparent;
margin: 2px 2px 5px 5px;
}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12
{
font:1px/1px verdana, arial, georgia, sans-serif;
padding: 0px 0px 0px 0px;
height:0px;
background-color : #cc0000;
}

.c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12
{
border-right: 2px solid #cc0000;
border-left: 3px solid #cc0000;
}

.c1
{
margin: 0px 11px 0px 11px;
border-right: 4px solid #cc0000;
border-left: 3px solid #cc0000;
}

.c2
{
margin: 0px 8px 0px 8px;
}

.c3
{
margin: 0px 6px 0px 6px;
}

.c4
{
margin: 0px 5px 0px 5px;
}

.c5
{
margin: 0px 4px 0px 4px;
}

.c6
{
margin: 0px 3px 0px 3px;
}

.c7
{
margin: 0px 2px 0px 2px;
}

.c8
{
margin: 0px 2px 0px 2px;
border-right: none;
border-left: none;
}

.c9
{
margin: 0px 1px 0px 1px;
}

.c10
{
margin: 0px 1px 0px 1px;
border-right: none;
border-left: none;
}

.c11
{
margin: 0px 0px 0px 0px;
}

.c12
{
font: 8pt verdana, arial, georgia, sans-serif;
padding: 0px 0px 0px 10px;
}
</style>

<div id="curve1">
<div class="c1"> </div> <div class="c2"> </div><div class="c3"> </div><div class="c4"> </div>
<div class="c5"> </div><div class="c6"> </div><div class="c7"> </div><div class="c8"> </div>
<div class="c9"> </div><div class="c10"> </div><div class="c11"> </div><div class="c11"> </div>
<div class="c11"> </div>
<div class="c12">
Teste de Bordas Arredondadas SEM IMAGENS!!!!
</div>
<div class="c11"> </div>
<div class="c11"> </div><div class="c10"> </div><div class="c9"> </div>
<div class="c8"> </div><div class="c7"> </div><div class="c6"> </div><div class="c5"> </div>
<div class="c4"> </div><div class="c3"> </div><div class="c2"> </div><div class="c1"> </div>
</div>

falou.

[MadPatryk]

ok, vou tentar...

vlwz! ;-)

[MadPatryk]

eu não to conseguindo acertar a as margens...

tem como vc(ou alguém!!! plx!) me da uma força plxxxx???

tipo, eu keria que ficasse bem baixo mesmo, muito perto da palavra

vlwz!

[Crystian]

Cara você precisa de todo esse código somente pra deixar uma borda arredondada? Pensa no momento q você precisar mudar alguma coisa dentro desse código, como você vai se achar? Uma imagem resolveria tudo, é só saber colocar ela direitinho na página q não tem erro. Pensa bem..

Abraço

[Guest Guest]

é cara, mas eu quero ter conhecimentos, e quanto mais melhor...

é claro que vou utilizar com imagens, mas se tem um jeito de se fazer sem imagens, eu quero saber!!!

já sei... mas agora eu quero intende-lo... e to tentando!!!

abraço