La herencia de CSS para el color de fondo desconocido es realmente transparente

Solución:

Configuración background-color: inherit lo hace hacer que tome el color de fondo del elemento padre.

La razón por la que está tomando transparent es porque el color de fondo del padre (el li) es transparent (el valor predeterminado).

El único otro elemento en su segundo JSFiddle que tiene un conjunto de colores de fondo es #unknown_background, que es el tatarabuelo del presentador.

Agregar div, ul, li { background-color: inherit; } al final de su hoja de estilo y el fondo se heredará hasta el final y el borde no se mostrará.

Publicando esto como lo sugirió @mavrosxristoforos, ¡felicitaciones! Esta es menos una respuesta y más para agregar a la información que está disponible aquí. Con suerte, esto será útil para algunas personas.

Si solo necesita un fondo no transparente que no entre en conflicto con el color del texto, pero que sigue siendo muy visible: mi solución implica el uso de una combinación de currentColor y filtros como invert, contrast o brightness en los elementos padre e hijo.

Estos trucos funcionan bien con temas dinámicos como temas claros, oscuros o incluso de colores sin especificar explícitamente ningún valor de color para estos elementos. Esto se puede usar con algunos temas CSS existentes que no tienen cosas definidas con variables CSS o tienen clases faltantes para cambiar solo un color en particular condicionalmente. Observe la demostración a continuación.

var root = document.documentElement;
var themeDark = true;

updateTheme( themeDark );

$('.card').on('click', function(){
  themeDark = !themeDark; // switch the theme
  updateTheme(themeDark);
});

function updateTheme(useDarkTheme){
  if (useDarkTheme) {
      root.style.setProperty('--primary','#000');
      root.style.setProperty('--secondary','#333');
      root.style.setProperty('--ternary','#eee');
    } else {
      root.style.setProperty('--primary','#efefef');
      root.style.setProperty('--secondary','#ddd');
      root.style.setProperty('--ternary','#333');
    }
}

/* say you're using a bootstrap theme with some defined colors, 
 * but you want to customize some colors of some elements which
 * have colors defined without CSS variables that you could 
 * have used.
 */

body {
  font-family: sans-serif; font-size: 14px;
  color: var(--primary);
  background: var(--secondary);
  }

.card {
  border: 1px solid #666; border-radius: 6px;
  padding: 1em; margin: 1em;
  user-select: none; cursor: pointer;
  background: var(--ternary);
  }

.card h2 {
  font-size: 24px;
  color: var(--primary);
  }

.card-body {
  border-radius: 6px;
  background: currentColor;
  }

.card-body p { padding: 1em; }

.card-body, .card-body p { filter: invert(1) contrast(1.2) brightness(0.8); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <h2>Title</h2>
  <div class="card-body">
    <p><b>Click to toggle the theme.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

---

---

Utiliza Nuestro Buscador