border css image

Oi Mauro,

Usando 2 tipos de borda e esse detalhe na lateral direita, só dá para fazer com 2 divs.

<div class="box">
 <div></div>
</div>

.box{
 width: 220px;
 height: 220px;
 border: 1px solid #f6d58c;
}

.box div{

 width: 180px;
 height: 180px;
 margin: 2px;
 border: 18px solid #f6d58c;
 background-color: #fff;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.box div:before{

 content: "";
 width: 18px;
 height:100px;
 float: left;
 background-color: #fff;
 right: -18px;
 position: relative;
}

	Ficaria assim: [https://jsfiddle.net/dougtop/vusdwqkw/](https://jsfiddle.net/dougtop/vusdwqkw/)

	Mas se não tiver essa borda externa, fica ainda mais simples: [https://jsfiddle.net/dougtop/nmquyjf7/](https://jsfiddle.net/dougtop/nmquyjf7/)

	 

	Quando estiver trabalhando com formas, dê uma olhada nesse link, dá para fazer bastante coisa legal com css: [https://helabs.com/artigos/2014/11/14/o-poder-do-css-3-desenhando-formas/](https://helabs.com/artigos/2014/11/14/o-poder-do-css-3-desenhando-formas/)

	 

	Abraços, Douglas.

Douglas, boa tarde!

Na mosca, obrigado!

Bom trabalho,

Mauro

que bom que ajudei! De nada.