Cómo quito la orilla que se ve en el primer boton al tener varios botones en una pág?

[clarat]

Hola


tengo un varios botones en mi página .html de éste tipo:

<input name="Cancelar" type="submit" class="botonx" id="Cancelar" value="Cancelar">



...El estilo que les aplico desde mi hoja de estilos .css, se llama "botonx" y es el siguiente:

.botonx{
overflow: visible;
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5B5B5B;
text-decoration: none;
padding-right: 3px;
width: auto;
cursor: hand;
height: 19px;
background-image: url(../img/fondo.gif);
padding-left: 3px;
border: 1px solid #666666;
}



Cuando veo publicada mi página, aparece pordefault el primer boton con el borde más oscuro que los demás , y si doy clik a otro botón, ese borde aparece en el seleccionado... ¿alguien sabe qué código debo tener y en donde, para que por default no me aparezca este borde? es decir, que al abrir mi página los botones se vean todos iguales, y que ya al selecionar uno, cambie el estilo...

agradezco de antemano su ayuda, gracias