Efecto biselado con CSS

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra.

Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow.

Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve.

HTML

<div class="biselado">Texto</div>

Hola, soy un cuadro con outset.

.biselado {
	background: #2323ff;  /* Fondo, debe ser más claro que el borde */
	border: 5px outset #4444ff;  /* Grosor del Borde */  /* Color del Borde */
	color: white;  /* Color del texto */
	text-align: center;  /* Alineación del texto */
	text-shadow: -1px -1px rgba(0,0,0,.2);
}

O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset.

Hola, soy un cuadro con inset.

Veamos ahora una manera más efectva de simular el biselado que se logra utilizando sombras (box-shadow).

Soy un cuadro con biselado.

.biselado {
	border: 1px solid #00cc00; /* Color del borde, debe ser más oscuro que fondo */
	background: #00f400; /* Fondo */
	border-radius: 6px;  /* Bordes redondos */
	box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
	text-shadow: 1px 1px 1px rgba(255,255,255,.9);  /* Sombra del texto */
	text-align: center;  /* Alineación del texto */
}

Soy un cuadro con biselado.

.biselado {
	border: 1px solid #00cc00; /* Color del borde, debe ser más claro que fondo */
	background:#00d800; /* Fondo */
	color: #fff;  /* Color del texto */
	border-radius: 6px;  /* Bordes redondos */
	box-shadow:inset 2px 2px 4px rgba(120, 120, 120, .4), inset -3px -3px 3px rgba(255,255,255,.4);
	text-shadow: 1px 1px rgba(0,0,0,.3);  /* Sombra del texto */
	text-align: center;  /* Alineación del texto */
}

Este efecto no vendría nada mal para los botones...

Púlsame

.boton1 {
	box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
	width: 90px;  /* Ancho del botón */
	border: 1px solid #9b9bff; /* Borde */
	background: #7777ff;  /* Fondo */
	text-align: center;  /* Alineación del texto */
	text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */
	border-radius: 5px;  /* Bordes redondos */
	color: white;  /* Color del texto */
}
.boton1:active /* Al presionarse el botón */ {
	text-shadow: 1px 1px rgba(0,0,0,.3);  /* Sombra del texto */
	background:#3d3dff;  /* Fondo más oscuro que el original */
	box-shadow:inset 4px 4px 4px rgba(0,0,0,.3), inset -3px -3px 3px rgba(255,255,255,.2);
}

Así como usamos el biselado para mensajes y botones, podés seguir experimentando para encontrarle más usos a este efecto. Saludos