CSS3 nos trae grandes cosas: transiciones, bordes redondeados, usar las tipos que queramos, etc. Pero, en mi opinión, la mejor feature de CSS3 es la comodidad que nos va a aportar para hacer tareas relativamente comunes. El ejemplo que os quiero ofrecer da buena muestra de ello.

Los bordes bicolor son algo muy habitual en el diseño de las aplicaciones web. El colocar un borde exterior de color oscuro, y uno interior más claro aportan una profundidad y un cuidado excelentes al componente que se lo coloquemos. Pero antes de la llegada de CSS3 era un poco costoso conseguirlo, y lo que es peor, nos obligaba a usar dos elementos:

<!-- Código HTML -->
<h2><span>Lorem ipsum dolor sit amet</span></h2>

/* Código CSS */
h2 {
	background: #ccc;
	border: 1px solid #888;
	padding: 0;
}

	h2 span {
		border: 1px solid #fff;
		display: block;
		padding: 0.25em 0.5em;
	}

En el H2 debíamos colocar el borde exterior, y en el SPAN, (convirtiéndolo en un elemento en bloque para poder aplicar el padding correctamente al conjunto) colocar el borde interior.

Con CSS3 esto es mucho más sencillo, necesitando únicamente un elemento. Para conseguirlo haremos uso de la propiedad box-shadow (y sus variantes con vendor prefixes, que son las que están implementadas en los navegadores a día de hoy).

Con box-shadow podemos aplicar sombras a los elementos que queramos, pudiendo definir si se aplica hacia dentro o hacia fuera, su dirección, su longitud y su color.

box-shadow: inset/outset top left spread color;

Gracias a esta propiedad, y a la posibilidad de aplicar más de una sombra a un mismo elemento, podemos tener bordes bicolor de una manera muy sencilla e indolora. No tenemos más que aplicar una sombra interior con top y left positivos, y sin degradado para que sea sólida, y otra exactamente igual pero con top y left negativos, para crear el “falso borde” inferior y el de la derecha.

<!-- Código HTML -->
<h2>Lorem ipsum dolor sit amet</h2>

/* Código CSS */
h2 {
	background: #ccc;
	border: 1px solid #888;

	-webkit-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
	-moz-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
	box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
}

Eso es todo, gracias a esta propiedad (y por ahora a sus homólogas con vendor prefixes), hemos conseguido un borde bicolor sin mayor complicación. La única pega es que esto no funciona en Internet Explorer… Pero bueno, ¿qué más da? :)

Si queréis echarle un ojo en vivo a esta técnica podéis hacerlo en el ejemplo que os he preparado.