¿Puedo agregar color de fondo solo para el relleno?

Tengo un cuadro de encabezado que incluye borde y relleno y color de fondo para ese cuadro, ¿puedo cambiar el color de fondo solo para la región acolchada después del borde y luego el mismo color de fondo para el resto del ancho (es decir, gris en el código dado) ?

Solo una pizca del código donde quiero el color de fondo acolchado:

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

Otra opción con CSS puro sería algo como esto:

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 aquí

Lamento a todos que esta sea la solución, la verdadera en la que no es necesario configurar el relleno.

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

Que he hecho...

• Se aplicaron dos degradados en el fondo, ambos con un color inicial y final. En lugar de usar un color sólido. La razón es que no puede tener dos colores sólidos para un fondo.
• Luego aplicó una propiedad de clip de fondo diferente a cada uno.
• haciendo que un color se extienda al cuadro de contenido y otro al borde, revelando el relleno.

Inteligente si me lo digo a mí mismo.

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;
}

Utilice las propiedades background-clipy box-shadow.

1) Establecer background-clip: content-box: esto restringe el fondo solo al contenido en sí (en lugar de cubrir tanto el relleno como el borde)

2) Agregue un interior box-shadowcon el radio de extensión establecido en el mismo valor que el relleno.

Entonces, digamos que el relleno es de 10 píxeles, establecido box-shadow: inset 0 0 0 10px lightGreen, lo que hará que solo el área de relleno se ilumine en verde.

Demostración de 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 ver un tutorial completo que cubre esta técnica, vea esta gran publicación de trucos de CSS

Puede usar degradados de fondo para ese efecto. Para su ejemplo, simplemente agregue las siguientes líneas (es mucho código porque tiene que usar prefijos de proveedor):

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);

No es necesario un marcado innecesario.

Si solo desea tener un borde doble, puede usar un contorno y un borde en lugar de un borde y un relleno.

Si bien también podría usar pseudoelementos para lograr el efecto deseado, no lo desaconsejaría. Los pseudoelementos son una herramienta muy poderosa que proporciona CSS, si los "desperdicia" en cosas como esta, probablemente los perderá en otro lugar.

Solo uso pseudo-elementos si no hay otra forma. No porque sean malos, todo lo contrario, porque no quiero desperdiciar a mi Joker.

las respuestas dijeron todas las posibles soluciones

Tengo otro con BOX-SHADOW

aquí está JSFIDDLE

y el codigo

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;
}

también es compatible con IE9, por lo que es mejor que la solución de gradiente, agregue los prefijos adecuados para obtener más soporte

IE8 no lo admite, ¡qué lástima!

No puede establecer el color del relleno.

Deberá crear un elemento de envoltura con el color de fondo deseado. Agregue un borde a este elemento y configure su relleno.

Mira aquí para ver un ejemplo: http://jsbin.com/abanek/1/edit

Esta sería una solución CSS adecuada que también funciona para IE8 / 9 (IE8 con html5shiv por supuesto): 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;
}

No hay una funcionalidad exacta para hacer esto.

Sin envolver otro elemento en el interior, puede reemplazar el borde por una sombra de caja y el relleno por el borde. Pero recuerde que el cuadro de sombra no se suma a las dimensiones del elemento.

jsfiddle está siendo muy lento, de lo contrario agregaría un ejemplo.

Simplemente envolvería el encabezado con otro div y jugaría con los bordes.

<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; }

Puede hacer un div sobre el relleno de la siguiente manera:

<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;

el ancho, la longitud, el color de fondo, los márgenes y el índice Z pueden variar, por supuesto, pero para cubrir el relleno, el índice Z debe ser superior a 0 para que quede sobre el relleno. Puede jugar con el posicionamiento y demás para cambiar su orientación. ¡Espero que ayude!

PD: los divs son html y #paddingOne y #paddingTwo son css (en caso de que alguien no lo haya entendido :)