Pequeña anomalía con border cuando "hover"!!

No entiendo por qué pasa Pongo un border de puntos (dotted), y al meterlo en el código exactamente igual para hover, los puntos de los extremos se colorean a medias. Podéis verlo en la foto, a la izquierda normal y a la derecha con el cursor encima (hover):


Estilos:
Código:
#cartel {
width: 200px;
height: 70px;
margin-top: 200px;
margin-left: 200px;
padding: 20px;
text-align: center;
border-left: dotted 18px gray;
}
#cartel:hover {
border-left: dotted 18px orange;
color: maroon;
}
¿Alguien sabe por qué ocurre, y cómo se soluciona? Gracias, un saludo.