Caja CSS con las esquinas redondeadas

  • Por
  • CSS
Nuevo ejemplo de maquetación de cajas con esquinas redondeadas, realizado con CSS.
En este taller de CSS continuaremos un ejercicio anterior, en el que realizábamos una caja con CSS para meter contenido. Con el mismo esquema relatado en el artículo anterior, vamos a realizar otro tipo de caja -con esquinas redondeadas-, únicamente cambiando las imágenes utilizadas.

Antes de comenzar la lectura de este artículo habría que leer el artículo precedente.

También es aconsejado ver el ejemplo que vamos a construir.

Caja con esquinas redondeadas

El ejemplo que sigue es para crear un contenedor con esquinas redondeadas. Los redondeados de las esquinas los haremos con imágenes, de manera que se pueda variar el color de la caja con las mismas imágenes.

Para conseguir esto vamos a utilizar las imágenes siguientes.

Caja esquinas redondeadas de arriba

Caja esquinas redondeadas de abajo

Estas 2 imágenes son transparentes, menos el redondeado de los lados, que tiene color blanco. Debido a ello, estas cajas con esquinas redondeadas sólo podrá utilizarse sobre fondo blanco. Si queremos hacer una caja para utilizar sobre otro fondo, tenemos que rehacer estas imágenes cambiando el color blanco.

El código HTML sigue siendo el mismo:

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

Ahora vemos el código CSS. Tiene muy pocas variaciones con respecto al del ejemplo anterior:

.cajaarriba{
width: 600px;
background-image: url("arriba.gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #660000;
color: #ffffff;
}
.cajaabajo {
background-image: url("abajo.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
}

Hay que fijarse que hemos definido un color de fondo en la clase cajaarriba. Si queremos que la caja varíe el color, simplemente habría que cambiar ese color de fondo.

El resultado puede verse 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

Anyul Rivas

04/11/2005
una mejor opcion para bordes redondos lo encuentras con nifty corners (combinacion javascript-css, con una interfaz sencilla de programacion).
yo lo hice en mi sitio (www.cclt.org.ve/nuevo)
http://pro.html.it/esempio/nifty/

Santi

16/9/2009
CSS
Es simple, pero esta muy bueno

Matias

18/6/2010
CSS
esta bueno a mi me sirvio bastante...

un consejo..porque solo sirve para fondo blanco..pero si agregamos:

border:3px solid white;

a la clase cajaarriba..se podra cambiar el color de fondo..y quedara como una caja cuadrada con un borde interior redondo..

saludos