Those. so that the shadow begins at the border itself, and not after it. I know about the use of the 2nd shadow, but the question is about the border.

    4 answers 4

    You can give the border to the block, and the shadow - to its pseudo-element. This option solves the problem?

    .border-and-shadow { border: 12px solid yellow; height: 100px; position: relative; width: 100px; } .border-and-shadow:after { content: ''; bottom: 0; box-shadow: 0 0 24px 0; left: 0; position: absolute; right: 0; top: 0; } 
     <div class="border-and-shadow"></div>

      You can reduce the size of the block, on the border of which a shadow is generated, by the number of pixels of the border.

       .block { width: 100px; height: 100px; border: 5px solid rgba(0,0,0,0.3); box-shadow: 0 0 20px -5px rgba(255,0,0,0.8); } 
       <div class=block></div>

      • Thank. But it's still not that. Probably only double shadow with stretching should be used. - user208916

       div { position: relative; background-color: #ffffff; width:200px; height:200px; border:5px solid red; box-shadow:0px 0px 25px #000; } div > div { border: none; display: block; position:absolute; width:200px; height: 200px; top:0; left:0; box-shadow:inset 0px 0px 25px #000; } 
       <div> Text <div></div> </div>

        I think that's possible

         div { position: relative; background-color: grey; width:200px; height:200px; border:6px solid red; } div:before { display: block; position:absolute; content: ''; top:0; left:0; width: 100%; height:100%; pointer-events: none; box-shadow:3px 3px 0px #000; } 
         <div>Текст</div>