Uno de los temas complejos que habían al momento de desarrollar un sitio web era trabajar con varias imágenes que contenían las mismas formas pero distintos colores… por lo general la forma rápida de hacerlo era tomar una imagen y repetirla, cambiándole el color,  lo que resultaba en una imagen un tanto pesada y fea como esta:

(más…)

Para un proyecto que estoy trabajando con los buenos amigos de Nuz Estudio me tocó trabajar con bordes redondeados inversos… algo así

lo típico es realizarlo con imágenes y ajustarlo con position absolute con 2 divs y macramé extras, pero en css es algo un poquito más complejo [y también un poquitito más entretenido de armar]

La técnica si es que le podemos llamar así consiste en definir un div y sobre él aplicar otro con bordes redondeados, y además un box-shadow con el atributo inset para que sea “hacia dentro”, finalmente rotamos el div base para que la sombra quede arriba y dé la sensación que la curva continúa. Ojo, no es un ejemplo perfecto, y por el momento funciona sólo en Firefox [hay que aplicar las reglas CSS3 para los otros navegadores]

Puedes ver el ejemplo final acá.

[Probablemente tengas que modificarlo un poquito cuando lo apliques en tu sitio, pero al menos ya tienes la lógica de cómo aplicarlo.