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

No entiendo por qué pasa :confused: 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):

[contenido no disponible]
Estilos:
#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.
parece ser por el padding, estoy casi que segura sin probar, quitale los estilos al elemento y ponle un elemento padre el cual lleve los estilos, asi el #cartel queda limpio