You can create CSS Picture frame type border using css styles.
For creating a CSS Picture frame type border you can use this code:
.htmlframe { position: relative; height: 100vh; width: 100%; background-image: linear-gradient(to top right, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%), linear-gradient(to top right, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%), linear-gradient(to top left, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%), linear-gradient(to top left, transparent 48.5%, gray 48.5%, gray 51.5%, transparent 51.5%); background-size: 50px 50px; background-position: top left, bottom right, top right, bottom left; background-repeat: no-repeat; padding: 50px; } .htmlframe:after { position: absolute; content: ''; height: calc(100% - 100px); width: calc(100% - 100px); top: 48px; left: 48px; border: 2px solid gray; } * { margin: 0; padding: 0; box-sizing: border-box; }
<div class="htmlframe">Some text</div>

An author of Namaste UI, published several articles focused on blogging, business, web design & development, e-commerce, finance, health, lifestyle, marketing, social media, SEO, travel.
For any types of queries, contact us on info[at]namasteui.com.