There was a question with the implementation of such a stroke:

screenshot

.thanks-ticket { display: flex; flex-direction: column; width: 363px; height: 500px; padding: 0 15px 0 30px; margin: 50px auto 90px; border-left: 5px solid #f2f5f8; border-right: 5px solid #f2f5f8; border-bottom: 5px solid #f2f5f8; } 
 <div class="thanks-ticket"></div>

    1 answer 1

    1. The easiest option is SVG :

     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200"> <polygon points="10,10 40,30 40,30 80,10 120,30 160,10 200,30 240,10 280,30 320,10 360,30 400,10 440,30 480,10 520,30 560,10 600,30 640,10 640,600 10,600" fill="none" stroke="dodgerblue" stroke-width="4" transform="scale(0.5)"/> </svg>

    2. Option using linear-gradient :

     .wrapper { width: 28rem; } .triangles { height: 3.3rem; background-image: linear-gradient(149deg, transparent 50%, dodgerblue 50%), linear-gradient(215deg, transparent 50%, dodgerblue 50%); background-size: 4rem 2.5rem, 4rem 2.5rem; } .main { background-color: dodgerblue; margin-top: -1rem; color: white; text-align: justify; } 
     <div class="wrapper"> <div class="triangles"></div> <div class="main"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde maxime dolor eveniet ducimus omnis voluptates beatae iste voluptatibus dolore, aliquam pariatur tempora dolorem nihil voluptatum, dolores adipisci! Laborum, sapiente beatae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, adipisci incidunt officiis, fuga cum facere vero mollitia beatae quibusdam numquam dolore, dolorum delectus aliquam velit tempore voluptate quis commodi quae. </div> </div>