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

0 vote309 views1 answer
In what language is html written
Html
2 votes350 views1 answer
Onclick show div and hide other div
Html
45 votes325 views4 answers
How to add an svg image to html
Html
0 vote291 views2 answers
How to give value to model from radio button html asp with enums if checked
Html
0 vote291 views1 answer
Remove html from string in sql
Html
-2 votes299 views2 answers
Onclick hide div javascript
Html
2 votes308 views2 answers
How to enable file input on click on image
Html
0 vote284 views1 answer
C++ compile syntax error
Html
0 vote320 views2 answers
Vue right click
Html
68 votes288 views5 answers
How to add a image file in html
Html