Caja CSS con una línea de borde redondeado

  • Por
  • CSS
Otro ejemplo de caja realizada con CSS en el que tenemos una línea de 2 pixels de ancho que rodea el contenido. La línea tiene esquinas redondeadas.
Vamos a realizar un contenedor con CSS, en el que tenemos una línea que hace de borde, todo alrededor de la caja, con las esquinas redondeadas.

Se trata de un ejemplo un poco más sofisticado, que cambiando las imágenes, nos permitirá hacer más variedad de contenedores. Este ejercicio está basado en un artículo precedente que habría que leer antes, llamado caja con CSS para meter contenido.

Antes de empezar, también podemos ver el ejemplo que vamos a realizar.

Para realizar este ejercicio vamos a necesitar tres capas con tres imágenes que vamos a colocar de fondo. Las capas e imágenes serán colocadas arriba, para crear los redondeados superiores, en medio, para crear el borde del medio y la capa de abajo, para crear los redondeados inferiores.

La capa de en medio debe crecer más o menos dependiendo del contenido que hayamos incluido dentro de la caja, a más contenido, la capa se hará mas grande.

Las imágenes que hemos utilizado nosotros son las siguientes:



El código HTML varía un poco con respecto al que habíamos visto en los ejemplos de cajas de artículos anteriores. Como decíamos, ahora participan 3 capas distintas.

<div class="caja">
    <div class="cajaarriba">
       <div class="cajaabajo">
          Lorem ipsum dolor sit amet, consectetuer
          …
       </div>
    </div>
</div>

El código CSS para definir la clase de estilo de cada una de las tres capas es el siguiente:

.caja {     width: 482px;
    background-image: url("centro.gif");
    background-repeat: repeat-y;
}

.cajaarriba {
    background-image: url("arriba.gif");
    background-position: top center;
    background-repeat: no-repeat;
}

.cajaabajo {
    background-image: url("abajo.gif");
    background-position: bottom left;
    background-repeat: no-repeat;
    padding: 15px 15px 15px 15px;
}

Las tres capas tienen la imagen correspondiente como fondo. Caja es la clase para la capa principal, que tiene el fondo que se debe repetir en un mosaico todo lo que crezca el contenedor.

Se puede ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Paulo

18/11/2005
He probado el ejemplo e iba todo bien, pero al escribir texto sin darle salto de carro me he percatado que el texto sale fuera de las imágenes.

Tomas

29/11/2007
¿Y si la caja en lugar de crecer verticalmente tuviera que crecer horizontalmente?

jaime

12/5/2009
gracias
Gracias amigo me funciono a la maravilla
solo agregarai qeu se indique que hay que poner la ruta de imagenes par aque las encuentr
excelente aporte

kronenmix

13/11/2009
caja crecimiento horizontal
vendria bien que pusieses un ejemplo donde la caja crece horizontalmente tambien en funcion del texto. eso es bastante mas complicado :(

Susana

26/2/2010
Crecimiento Horizontal
Me ha venido genial este código.
Para el crecimiento horizontal no tendrías que poner repeat-x?? es una sugerencia, no lo he probado.

RafaRG

01/9/2011
sugerencia
¿y no sería mucho más fácil usar los "border-radius"? por ejemplo:
#caja {
background-color:white;
border:1px solid black;
border-radius: 3px;
}
o si se quiere elegir qué bordes poner redondeados:
#caja {
bakcground-color:white;
border:1px solid black;
border-radius: 3px 3px 0px 0px; //esto indica que los dos bordes de arriba serán redondeados con un radio de 3 px, mientras que los de abajo serán normales
}
luego el contenido iría dentro del div normal:
<div id="caja">Este es el contenido del div.</div>

Galacticmelody

24/5/2012
Saludos
Buenas noches, lo que cuenta RafaRG es cierto... dejando esos problemas con las imagenes .. con border radius se puede hacer sin percanse alguno.. de igual manera un buen tuto... saludoss

javibal

06/6/2012
¿Y que pasa si tengo un navegador que no acepta border-radius?
Si consigues hacer funcionar border-radius en IE6, IE7 o IE8. Avisame. Por desgracia estos 3 navegadores son los más utilizados y nos toca hacer "truquillos" de estos.

Carlos

24/10/2012
Usar border:radius
border:radius solo está soportado por CSS3, por el momento aún trabajo con CSS2 y por lo tanto es una buena técnica para hacer bordes redondeados...

cmarinv2005

24/10/2012
bordes redondeados para Mozilla Firefox
Para agregar un borde redondeado a una imágen en versiones actuales de Firefox solo basta con agregar..

.imagen{
background-image:url("imagenes/sensor.png");
background-repeat:no-repeat;
width:70px;
height:70px;
float:left;
border-style:solid;
border-radius: 20px;
}

cmarinv2005

24/10/2012
Quiero agregar algo a mi comentario
.imagen{
background-image:url("imagenes/sensor.png"); /*aqui cargo la imágen*/
background-repeat:no-repeat; /*esto evita que se repita la imágen de fondo*/
width:70px; /*estos tamaños varían según la imágen*/
height:70px; /*estos tamaños varían según la imágen*/
float:left; /*esto me permite colocar texto, imágenes seguidos*/
margin-left:10px; /*defino que tan separado de los bordes de la izquierda*/
margin-top:10px; /*defino que tan separado de los bordes de arriba*/
border-style:solid; /*defino estilo de borde*/
border-radius: 20px; /*defino radio para los 4 bordes de una caja*/
}