Quiero redonder bordes de mi pagina

-thor- · #1 (**permalink**) 15/09/2006, 13:32

y me funciona,cuando utilizo el css de esta manera en mi pagina

Código:

<style type="text/css">
.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#E6D9B3;
}
.spiffy1{
border-right:1px solid #E6D9B3;
padding-right:1px;
margin-right:3px;
border-left:1px solid #E6D9B3;
padding-left:1px;
margin-left:3px;
background:#E6D9B3;
}
.spiffy2{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
padding:0px 1px;
background:#E6D9B3;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
}
.spiffy5{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
}
.spiffy_content{
padding:0px 5px;
background:#E6D9B3;
}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b> <div class="spiffy_content">
texto que saldra en el area redondeada
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

pero quiero utilizar ese codido utilizando esta manera de llamar al archivo css

Código:

<LINK REL='stylesheet' TYPE='text/css' HREF='estilo.css'>

pero al hacerlo de esa forma no me resulta el redondeo en la pagina,como puedo solucionar ese problema.
gracias

esto es lo que hago en la pagina para llamar al archivo css

Código:

<head>
<LINK REL='stylesheet' TYPE='text/css' HREF='estilo.css'>
</head>

<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b> <div class="spiffy_content">

texto que saldra en la parte redondeada

</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

este archivo css utilizo,estilos.css

Código:

.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#E6D9B3;
}
.spiffy1{
border-right:1px solid #E6D9B3;
padding-right:1px;
margin-right:3px;
border-left:1px solid #E6D9B3;
padding-left:1px;
margin-left:3px;
background:#E6D9B3;
}
.spiffy2{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
padding:0px 1px;
background:#E6D9B3;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
}
.spiffy5{
border-right:1px solid #E6D9B3;
border-left:1px solid #E6D9B3;
}
.spiffy_content{
padding:0px 5px;
background:#E6D9B3;
}

praetor2004 · #2 (**permalink**) 15/09/2006, 22:55

Buenas! Por qué no usas mejor esta solucion, es mucho más sencilla y ponés darle esquinas curvas a los divs que quieras, es un código sencillo en javascript y evitas utilizar tantos class para lo mismo...

Espero te sea de utilidad.

El link: http://www.curvycorners.net/usage.php

dario-g · #3 (**permalink**) 16/09/2006, 02:55

Prueba con
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
Pero lo que te comento de usar javascript es una buena alternativa, tambien puedes usar 5 imagenes 4 para las esquinas y una mas para el relleno, con la pega de que esta forma solo usas la caja redondeada del color de la imagen.
Sugerencia javascript