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.