enter image description here What means it is best to make a frame, say, to the form of comments, as in the image present here? I understand that it can be set in the background, but I am writing here because I do not rule out that I don’t know everything about the possibilities of such properties as the border and outline. In addition, I would like to avoid unnecessary downloads of images on the page.

  • Write what is beyond the frame, what tools have already been tried and what does not suit you. Without this, it is not clear what you need and what your snag is. - Gleb Kemarsky

2 answers 2

Here I found something like that

* { box-sizing: border-box; } .wrap { height: 200px; padding: 25px; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #FFCC00, #FFCC00 10px, #000000 10px, #000000 20px, #FFCC00 20px, #FFCC00 30px, #000000 30px, #000000 40px); } 
 <div class="wrap"> <div class="gradient"></div> </div>

    https://codepen.io/anon/pen/rwdrye

    Replace the picture on your

     div { margin: 20px; border-origin: content-box; float:left;} .stamp { background-color: #ccc; border: solid 9px transparent; -webkit-border-image: url(https://i.stack.imgur.com/C4IV0.jpg) 9 / 9px / 12px round; -moz-border-image: url(https://i.stack.imgur.com/C4IV0.jpg) 9 / 9px round; -o-border-image: url(https://i.stack.imgur.com/C4IV0.jpg) 9 round; border-image: url(https://i.stack.imgur.com/C4IV0.jpg) round 9 / 9px / 12px; width: 158px; height: 88px; float:left; } 
     <div class="stamp"></div> 

     <div class="stamp"></div>

    Option without pictures

    https://codepen.io/anon/pen/GExXEK

     div { margin: 20px; border-origin: content-box; float:left;} .stamp { background-color: #ccc; border: solid 9px transparent; border-image: 10 repeating-linear-gradient(-45deg, #FFCC00, #FFCC00 10px, #000000 10px, #000000 20px, #FFCC00 20px, #FFCC00 30px, #000000 30px, #000000 40px); width: 158px; height: 88px; float:left; } 
     <div class="stamp"></div>

    • In my unnecessarily tricky. If it all came down to the downloads of pictures, it's probably easier to put the form in a div with a given background - Alexander Bashmakov