Posso adicionar cor de fundo apenas para preenchimento?

Eu tenho uma caixa de cabeçalho incluindo borda e preenchimento e cor de fundo para essa caixa, posso alterar a cor de fundo apenas para a região preenchida após a borda e, em seguida, a mesma cor de fundo para o resto da largura (ou seja, cinza no código fornecido) ?

Apenas uma pitada do código onde desejo a cor de fundo preenchida:

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}

Outra opção com CSS puro seria algo assim:

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

Demo aqui

Lamento a todos que esta é a solução verdadeira onde você não tem que definir o preenchimento.

http://jsfiddle.net/techsin/TyXRY/1/

O que eu fiz...

• Aplicou dois gradientes no fundo com ambos tendo uma cor inicial e final. Em vez de usar cores sólidas. A razão é que você não pode ter duas cores sólidas para um fundo.
• Em seguida, aplicou diferentes propriedades de clipe de fundo a cada um.
• fazendo assim com que uma cor se estenda para a caixa de conteúdo e outra para a borda, revelando o preenchimento.

Inteligente se eu disser a mim mesmo.

div {
    padding: 35px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Use as propriedades background-clipe box-shadow.

1) Definir background-clip: content-box- restringe o plano de fundo apenas ao conteúdo em si (em vez de cobrir o preenchimento e a borda)

2) Adicione um interno box-shadowcom o raio de propagação definido com o mesmo valor do preenchimento.

Portanto, digamos que o preenchimento seja de 10 px - definido box-shadow: inset 0 0 0 10px lightGreen- o que tornará apenas a área de preenchimento verde claro.

Demonstração Codepen

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

Para um tutorial completo que cobre essa técnica, veja este ótimo post de truques de CSS

Você pode usar gradientes de fundo para esse efeito. Para o seu exemplo, basta adicionar as seguintes linhas (é apenas tanto código porque você tem que usar prefixos de fornecedor):

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

Não há necessidade de marcação desnecessária.

Se você deseja apenas uma borda dupla, pode usar contorno e borda em vez de borda e preenchimento.

Embora você também possa usar pseudoelementos para obter o efeito desejado, não o aconselho. Pseudo-elementos são uma ferramenta muito poderosa que o CSS oferece, se você os "desperdiçar" com coisas como essa, provavelmente irá perdê-los em outro lugar.

Eu só uso pseudoelementos se não houver outra maneira. Não porque sejam ruins, pelo contrário, porque não quero desperdiçar meu Coringa.

as respostas diziam todas as soluções possíveis

Eu tenho outro com BOX-SHADOW

aqui está JSFIDDLE

e o código

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

ele também oferece suporte no IE9, então é melhor do que a solução gradiente, adicione prefixos adequados para obter mais suporte

IE8 não suporta, que pena!

Você não pode definir a cor do preenchimento.

Você terá que criar um elemento wrapper com a cor de fundo desejada. Adicione borda a este elemento e defina seu preenchimento.

Veja um exemplo aqui: http://jsbin.com/abanek/1/edit

Esta seria uma solução CSS adequada que também funciona para o IE8 / 9 (IE8 com html5shiv, é claro): codepen

nav {
  margin:0px auto;
  height:50px;
  background-color:gray;
  padding:10px;
  border:2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Não há funcionalidade exata para fazer isso.

Sem envolver outro elemento dentro, você pode substituir a borda por uma sombra de caixa e o preenchimento pela borda. Mas lembre-se de que a sombra da caixa não aumenta as dimensões do elemento.

jsfiddle está sendo muito lento, caso contrário, acrescentaria um exemplo.

Eu apenas envolveria o cabeçalho com outro div e brincaria com as bordas

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS:

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Você pode fazer uma div sobre o preenchimento da seguinte maneira:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

a largura, o comprimento, a cor do plano de fundo, as margens e o índice z podem variar, é claro, mas para cobrir o preenchimento, o índice z deve ser maior que 0 para que fique sobre o preenchimento. Você pode mexer no posicionamento e outros itens para alterar sua orientação. Espero que ajude!

PS, os divs são html e os #paddingOne e #paddingTwo são css (caso alguém não tenha entendido :)