Border corner frames image css

<style>
.corners {
  position: relative;
  width: 50px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}
</style>
<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

Source: stackoverflow.com

Similar codes

1 vote102 views3 answers
Bootstrap stop carousel
Html
1 vote97 views2 answers
Superscript in html
Html
1 vote107 views2 answers
Add icon website
Html
23 votes105 views2 answers
Add favicon to next js static site
Html
19 votes108 views2 answers
Html snake hr tag
Html
38 votes132 views4 answers
Meta viewport
Html
29 votes78 views1 answer
How to make the dashed border with longer dashes css
Html
0 vote130 views2 answers
How to get image on the tab bar html
Html
1 vote103 views1 answer
Disable auto submit when hitting enter key
Html
1 vote115 views4 answers
Html input type file accept excel
Html