Elemento DIV externo de CSS con caja interior / accidente cerebrovascular

Question

Estoy tratando de intentar intentar lo siguiente.Tengo un div que contiene una caja con un gran golpe de frontera.Aquí está el código con el que he estado jugando.

.insta{
  background:#000;
  width:820px;
  height:300px;
  margin-left: auto;
  margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}

<div class="insta"><div class="inner-line"></div></div>

y obtengo este resultado,

Estoy tratando de llegar a esto como el resultado final,

Sé que los métodos de la caja proporcionan CSS, pero no sé si puedo lograr esto usando eso.¿Alguna idea o pensamiento?

Answer 1

Puede usar una combinación de sombreado de caja que no está utilizando una propagación o desenfoque y borde:

css

    border: 10px solid white;
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);

jsfiddle

Answer 2

Tal vez el tipo de frontera "Ridge" es suficiente ...

http://jsfiddle.net/67u9z/1/

.inner-line{
    border:3px ridge white;
    ...

Answer 3

I know this question is very old, but you can use outline offset: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

Just change the offset to a negative in order to get it inside the container:

outline-offset: -15px;