Solo diré que el borde se suma al width del elemento 2 veces (obviamente), así que al crecer, en tu caso 4 pixeles, arrastrará a todos los elementos que haya después, sobre todo si es un div flotante.
No sé cómo está el maquetado, pero prueba a hacer esos elementos un poco más pequeños para que cuando uno crezca, el desplazamiento del elemento más a la derecha no salte a la siguiente línea o lo que sea.
O prueba a restarle el doble del ancho del borde al width y al height, y luego a sumárselos en el mouse out.
Ej:
Código HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<style>
div {float:left; width: 200px; height:50px; background: red; margin: 20px; }
</style>
<script>
$(function(){
$("div").hover(
function(){
$(this).css({width: "180px", height: "30px", border: "10px solid blue"});
},
function(){
$(this).css({width: "200px", height: "50px", border: "none"});
}
);
});
</script>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>