CSS externo elemento div com caixa interna/fronteira acidente vascular cerebral

Question

Eu estou tentando para tentar o seguinte.Eu tenho uma div contendo uma caixa com uma grande fronteira de um avc.Aqui está o código que tenho vindo a jogar com.

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

E eu obter este resultado,

Eu estou tentando chegar a isso como o resultado final,

Eu sei da caixa de métodos de CSS, mas não sei se pode conseguir isso usando que.Todas as idéias ou pensamentos?

Answer 1

Você pode usar uma combinação de caixa de sombra que ainda não estão usando um spread ou borrão e fronteira:

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

Talvez o tipo de borda "ridge" é o suficiente...

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

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

Answer 3

Eu sei que essa pergunta é muito antigo, mas você pode usar o contorno de deslocamento:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

Basta alterar o offset negativo, a fim de fazê-lo dentro do recipiente:

outline-offset: -15px;