CSS Picture frame type border

Disable text selection

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>
You may like:  Bring new life into your CSS

Leave a Reply

Your email address will not be published. Required fields are marked *