Bordes redondos crossbrowser
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.
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.