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

11 votes315 views2 answers
Linked image html
Html
0 vote317 views1 answer
X-auth-token
Html
0 vote289 views1 answer
Email html table
Html
2 votes287 views2 answers
Add html img tag
Html
12 votes307 views3 answers
Vue form
Html
18 votes314 views1 answer
Add css to an html file
Html
32 votes310 views6 answers
Text align center
Html
0 vote290 views1 answer
How to add image in title bar
Html
3 votes313 views1 answer
Gradient on top of image css
Html
9 votes298 views1 answer
Css underline color
Html