Esquinas redondeadas con una sola imagen

Este es un ejemplo de solución para conseguir una caja de texto con esquinas redondeadas. La originalidad de esta solución frente a otras muchas parecidas está en el uso de una sola imagen para las esquinas, en lugar de cuatro.

La imagen usada en este ejemplo es:

Una de las ventajas de usar una sola imagen es la rapidez que ofrece para cambiar sus colores (tanto el interior de la caja como el del fondo de la página), ya que sólo hay que hacerlo en una imagen, y luego cambiar los valores en las propiedades correspondientes de la hoja de estilos.

Se trata de una imagen en formato GIF de 30x30 pixels. Por tanto, el radio de las esquinas es de 15 pixels.

El código CSS se encarga de utilizar las partes apropiadas de la imagen para producir las cuatro esquinas.

Esta solución fue obtenida de Airtight Corners. Se ha comprobado su correcto funcionamiento en los navegadores Firefox, IE y Opera.