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;
}