problema con esquinas redondeadas

walterfcr · #1 (**permalink**) 16/11/2010, 22:32

Estoy maquetando una pagina que lleva 2 columnas y pretendo redondearles las esquinas utilizando esta tecnica

Código HTML:

<div id="contenedor">
<b class="esquinas_superiores">
  <b class="r1"></b>
  <b class="r2"></b>
  <b class="r3"></b>
  <b class="r4"></b>
</b>
 
<!-- Aquí se incluyen los contenidos -->
 
<b class="esquinas_inferiores">
  <b class="r4"></b>
  <b class="r3"></b>
  <b class="r2"></b>
  <b class="r1"></b>
</b>
</div>


.esquinas_superiores, .esquinas_inferiores {
  display: block;
}
.esquinas_superiores *, .esquinas_inferiores * {
  display: block;
  height: 1px;
  overflow: hidden;
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }

la parte superior queda perfecta pero la parte inferior no se ve o queda igual

aca dejo los codigos a ver si alguien puede ver mi error

Código HTML:

<body>
<div id="cabecera">
  
</div> 

<div id="container">

 <b class="esquinas_superiores"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
 
 
    <div id="content">
      <p> BIENVENIDOS <br />
          <br />
        El equipo de trabajo del Grupo xxxxx le da la más cordial bienvenida a nuestro sitio en internet. Esperamos que éste le resulte muy interesante, pero principalmente, útil para el desarrollo de su negocio. <br />
        
    </div>
	
  
  <div id="menu"> 
  bla bla bla 
  </div>
   
 <b class="esquinas_inferiores">
  <b class="r4"></b>
  <b class="r3"></b>
  <b class="r2"></b>
  <b class="r1"></b>
</b>
 
  </div>


 


<div id="pie">
 
</div>


</body>

css

Código HTML:

#container {  
background-color: #C1EBFF;
overflow: hidden;  
width: 880px;  
margin: 10px auto 5px auto;  
border: 1px solid #fffS;  
} 


#content {  
background-color: #fff;  
width: 500px;  
border-right: 380px solid #fff; /* ancho y color del menú */  
margin-right: -380px;  
float: left;  
}



#menu {  
width: 380px;  
float: left;  
color: #fff;  
background: #fff;  
text-align: left;  
}

#cabecera {
	
	height: 100px;
	margin: auto;
}

body {
	min-width: 990px;
	background-color: #C1EBFF;
}

#pie {
	clear: both;
	background-attachment: scroll;
	padding: 0px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
p {
	margin: 50px;
}
#container #menu img {
	margin-top: 50px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 25px;
}




.esquinas_superiores, .esquinas_inferiores {
  display: block;
}
.esquinas_superiores *, .esquinas_inferiores * {
  display: block;
  height: 1px;
  overflow: hidden;
}
.r1 {
	margin: 0 5px;
	background-color: #FFFFFF;
}
.r2 {
	margin: 0 3px;
	background-color: #FFFFFF;
}
.r3 {
	margin: 0 2px;
	background-color: #FFFFFF;
}
.r4 {
	margin: 0 1px;
	height: 2px;
	background-color: #FFFFFF;
}

frank_harbey12 · #2 (**permalink**) 17/11/2010, 08:04

y si utilizas border radius?

-moz-border-radius: 5px; //para firefox y netscape
-webkit-border-radius: 5px //para safari y opera
border-radius: 5px; //para los exploradores que soporten css3

esos son bordes redondeados en todas las esquinas

walterfcr · #3 (**permalink**) 17/11/2010, 09:19

border radius es genial pero no funciona en IE y necesito que se vea bien en IE.

kseso? · #4 (**permalink**) 17/11/2010, 09:51

Unos cuantos tutoriales para lograr doblar las esquinas:
http://www.smashingshare.com/2009/11...ers-tutorials/
Quizás ahí encuentre lo que anda buscando