Una vuelta de tuerca: redondear selectivamente

Hasta ahora nos hemos ahorrado el escribir montones de DIVs para hacer esquinas redondeadas, pero ¿qué pasa si queremos hacer esto?

El nuevo script es casi igual que el anterior, aunque la sintaxis cambia un poco. El script lo tenéis como adjunto a este artículo.

La sintaxis anterior sigue funcionando exactamente igual con el nuevo script, pero ahora se puede ser un poco más concreto. Podemos redondear sólo las esquinas de un lado de la caja usando rounded-top, rounded-bottom, rounded-left y rounded-right. Si usamos rounded-top-left, rounded-top-right, rounded-bottom-left o rounded-bottom-right redondearemos sólo una de las esquinas.

Hay cuatro casos especiales: rounded-none, rounded-top-none, rounded-bottom-none y rounded-none-none. Estas dos claves se han agregado para mayor coherencia. Las claves rounded-none y rounded-none-none producen exactamente el mismo resultado: una caja con bordes a los lados y nada arriba y abajo. Las otras dos, rounded-top-none y rounded-bottom-none, provocan que el lado especificado no se redondee. Veamos algunos ejemplos:

Combinando distintos tipos de redondeado podemos hacer efectos como estos:

Eso es todo. Espero que esta técnica os haya gustado. En el fichero adjunto tenéis el script que podéis usar en vuestras páginas.