Incomplete borders around div

Question

I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:

<

Answer 1

This approach allows you to:

• add any content and the borders will adapt around it regardless of height or width of the content
• support transparent background and can be displayed over an image or non plain colors
• doesn't add any unsemantic elements

It relies on 2 absolutely positioned pseudo elements and one div. The spacing between the content and the borders is controlled by the padding on the div :

div{
  position:relative;
  display:inline-block;
  padding:50px 100px;
  border-left:1px solid #000;
  text-align:center;
}
div:before, div:after{
  content:'';
  position:absolute;
  right:50%; left:0;
  height:50px;
  border-right:1px solid #000;
}
div:before{
  top:0;
  border-top:1px solid #000;
}
div:after{
  bottom:0;
  border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}

<div>
  <h2>This is a very long title on<br/> 2 lines</h2>
  <button>Button</button>
  <p>Some text</p>
</div>

Answer 2

You can do with css pseudo ::after and ::before , something like this

.incomplete-box{
  border: solid 1px #fff;
  border-right: none;
  width: 100px;
  height: auto;
  position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
  content: '';
  position: absolute;
  height: 30%;
  width: 1px;
  background-color: #fff;
  right: 0;
}
.incomplete-box::after{
  top: 0;
}
.incomplete-box::before{
  bottom: 0;
}

Demo

Fixed width and height : https://jsfiddle.net/nikhilvkd/qt5ne3yw/

Auto width and height: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/