Mucho se usa en el diseño web el recurso de los bordes redondeados, principalmente en formas que soportan cajas de texto. Esto se hacía fácilmente utilizando una tabla y varias celdas, y éstas se adaptaban fácilmente al tamaño del contenido. Ahora, son otros tiempos. El mundo cambia, y existen varios métodos para lograrlo sin las desprestigiadas tablas. Estos métodos incluyen imágenes (GIF), JavaScript con CSS o sólo CSS. En esta ocasión, mostrare un método que utiliza sólo CSS para su diseño, lo que nos ahorra unos cuantos bytes de peso y se adapta fácilmente a lo que contiene, sean imágenes o sólo texto. Además, te sacas la lata de andar cortando esos bordecitos en Photoshop y que calcen unos con otros.

El Método

Explico esto para que se acostumbren a saber cómo funcionan las cosas, y no sólo corten-peguen. Así, si necesitan modificar algo, ya saben por dónde comenzar a buscar. Usaremos un cuadrado de 20 x 20 px con el fondo del sitio. Luego, usaremos un bullet con el color de la caja. Para este ejemplo, usaremos el fondo rojo #C00 y la caja gris #CCC.

El HTML: En el ejemplo puedes disfrutar del código, presionando View Source en tu browser favorito.

Ver Ejemplo

Link: Rounded Corners Without Images

PD. Probado en: Mac [Safari, Firefox, Opera, Flock, SunriseBrowser, Camino; Windows [Firefox]. Si alguien ve algun detalle en IE de Win, que trate de ver que es.