I need to have an extra frame into which one could later stuff more content. I did not get it to align. Here is the code.

div.preview-box {position: absolute; width: 70px; height: 60px; background-image: linear-gradient(to top, #252323, rgba(0,0,0, 0.86)); border: 1px solid black; border-bottom: 0px;} div.preview-box::after {content: ""; border: 2px solid #343333; position: fixed; width: 68px; height: 58px;} 
 <div class="preview-box"></div>

That is, it is necessary that the frame be centered and indented 1px from each side.

  • So everything seems to work ... - Andrey Fedorov
  • @AndreyFedorov She is not in the center of the parent. - Eugen Eray
  • Okay, do it now ... - Andrey Fedorov

2 answers 2

Option using box-shadow

 div.preview-box { position: relative; width: 70px; height: 60px; background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86)); border: 1px solid black; box-sizing: border-box; box-shadow: inset 0 0 0 2px tomato; /* для примера */ } 
 <div class="preview-box"></div>

  • From the phone I can not look. Sori - Eugen Eray
  • Cool option. I like this! 👍 - Eugen Eray

 div.preview-box { position: relative; width: 70px; height: 60px; background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86)); border: 1px solid black; } div.preview-box::after { content: ""; border: 2px solid red; // #343333; position: absolute; width: 70px; height: 60px; box-sizing: border-box; } 
 <div class="preview-box"></div>