Borda da div nao fica transparente por causa do background color

Eu tenho uma div que fica no topo da pagina e fixa. Na teoria ela deveria ter uma borda com trasparencia mas não é isso que aocntece na pratica.

No código abaixo da pra ver que eu tive que comentar a linha que aplica a cor de fundo da div por que se eu aplicar um background ela simplesmente não deixa a borda aparecer de forma transparente, porque ao que me parece a cor de fundo que deve ser solida tb fica até o fim da borda, ou seja a cor de fundo da div fica atras da borda tb.

#top_menu{
 /* background: none repeat scroll 0 0 #084090; */
 border-bottom: 10px solid rgba(2, 58, 117, 0.27);
 float: left;
 width: 100%;
 position: fixed;
 z-index: 999;

Fiz uma gambiarra criando outra div no top, tambem fixa, porem com a altura menor.

#gambiarra_topo{
 background: none repeat scroll 0 0 black;
 height: 69px;
 float: left;
 width: 100%;
 position: fixed;
 z-index: -1;
}

Tenho outros layouts que fiz e sempre usei essas bordas e nunca tive problema, mas agora nao entendo o que houve.

Achei que pode ser algo como uma herança de div pai pra filho mas nao encontrei nada que pudesser ser isso.

Porque a cor de fundo da div tá atrapalhando a borda semi transparente?

obs. só da pra ver que a borda fica semi transparente quando a cor de fundo da div tb fica semi transparente.