Antialias a un objeto HTML con rotate-transform

[junihh]

Hola señores

Maquetando un formulario de registro tocó que debía tener una ligera rotación, así que lo hice con transform:rotate. Todo bien hasta el momento que preparé los botones de envío.

El formulario tiene dos botones, con background-image y box-shadow cada uno. Debido a la rotación, los bordes lucen bastante mal, como si no tuvieran antialias. Pueden ver acá una muestra de cómo lucen dichos botones.

¿Existe algún método de aparentar antialias con CSS? Estuve buscando y los resultados sólo hablaban de hacks para antialias a text-shadow.

Gracias anticipadas a cualquier respuesta, sugerencia o idea que me puedan dejar.

[kseso?]

En el foro de css poco se puede hacer con imágenes.
La base para ofrecer respuestas acordes al problema particular son los códigos (html+css) implicados.
Sin ellos, sólo sugerencias generales, como mucho.
Tampoco indica en qué navegador lo está viendo.

Así que sugerencias:
pruebe a suavizar con una primera sombra (inset/outset) de color acorde con el dentado.

[junihh]

Entiendo el punto.

Este es el selector de los botones en mi CSS:

Código HTML:

.main-boton {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 4px #000;
	letter-spacing: 1px;
	color: #FFF;
	padding: 12px 20px;
	background: url(../images/bckg-botones.gif) repeat-x;
	cursor: pointer;
	
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-khtml-border-radius: 5px;
	border-radius: 5px; 
	
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.main-boton:hover { background-position: 0 -73px; }

Lo siguiente es el HTML de cada botón:

Código HTML:

<input type="button" value="Registrarme y Compartir" class="main-boton" /> 

Los browsers donde se presenta la situación son Chrome, Firefox y Opera. Explorer está fuera del contexto para este proyecto.

Probé aplicando borde de 2px y no me sirvió, así que probé aplicándo doble shadows como sugeriste y aunque mejoró un poco, todavía se nota el borde acerrado. El selector quedó así:

Código HTML:

.main-boton {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 4px #000;
	letter-spacing: 1px;
	color: #FFF;
	padding: 12px 20px;
	background: url(../images/bckg-botones.gif) repeat-x;
	cursor: pointer;
	
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-khtml-border-radius: 5px;
	border-radius: 5px; 
	
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px #00B4F7, 0 4px 10px rgba(0,0,0,0.5);
}
.main-boton:hover { 
	background-position: 0 -73px; 
	box-shadow: 0 0 5px #1F4B88, 0 4px 10px rgba(0,0,0,0.5);
}