Incomplete Borders Around Div

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: My initial idea is to create

Solution 1:

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/

Solution 2:

You can do this with :before and :after pseudo elements

Complete designFiddle

.square {
  width: 200px;
  height: 300px;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  position: relative;
}

.square:before, .square:after {
  content: "";
  height: 20%;
  position: absolute;
  right: 0;
  border-right: 1px solid gray;
}

.square:before {
  bottom: 0;
}

<divclass="square"></div>

or SVG

line {
  stroke: #6996FB; 
  stroke-width: 2;
}

svg {
  overflow: visible;
}

button {
  padding: 10px50px;
  border: none;
  color: white;
  margin-right: 10px;
  margin-top: 15px;
}

.btn-blue {
  background: #5D8CFF;
}

.btn-green {
  background: #33F1D9;
}

h3 {
  margin: 0;
}

<svgwidth="250"height="300"version="1.1"xmlns="http://www.w3.org/2000/svg"><linex1="1"y1="1"x2="250"y2="1"></line><linex1="0"y1="300"x2="250"y2="300"></line><linex1="1"y1="1"x2="1"y2="300"></line><linex1="249"y1="0"x2="249"y2="70"></line><linex1="249"y1="230"x2="249"y2="300"></line><foreignobjectx="60"y="90"width="400"height="180"><bodyxmlns="http://www.w3.org/1999/xhtml"><h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing  elit. Suscipit</h3><buttonclass="btn-blue">Btn 1</button><buttonclass="btn-green">Btn 2</button></body></foreignobject></svg>

Solution 3:

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:50px100px;
  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>

Solution 4:

Well, go with the above answers, I recommend using pseudo elements to achieve this effect.

But There is another way to accomplish this without using pseudo-elements.

Here is how you should do this.

.row{display:table;table-layout:fixed;}
    .col{display:table-cell;}
    
    .row{width:250px; margin: auto;}
    .mid.row > .col{ height: 100px; }
    
    .col{ text-align: center;}
    .top.col, .bottom.col{
      border-top: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      height: 50px;
    }
   .bottom.col{
     border-top: 0;
     border-bottom: 1px solid black;
   }
    .mid.row > .col{
      border-left: 1px solid black;
      border-right: 0;
      vertical-align: middle;
      text-align: right;
    }
   .mid.row > .colspan{
      margin-right: -30px;
     max-width: 300px;
    }

<divclass="row"><divclass="top col"></div></div><divclass="mid row"><divclass="col"><span>Hey you can achieve this without using pseudo elements :)</span></div></div><divclass="row"><divclass="bottom col"></div></div>

Solution 5:

We can do this with linear-gradients. No SVG, no pseudo-element. I used some variables to control everything easily.

.container {
  /* you can change these variables */--border-color: #000;
  --border-width: 2px;
  --space: 100px;
  
  width: 200px;
  height: 300px;
  position: relative;

  background: linear-gradient(var(--border-color), var(--border-color)) 00/var(--border-width) 100%, 
              linear-gradient(var(--border-color), var(--border-color)) 0100%/100%var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 00/100%var(--border-width), 
              linear-gradient(var(--border-color), var(--border-color)) 100%0/var(--border-width) calc(50% - (var(--space) / 2)), 
              linear-gradient(var(--border-color), var(--border-color)) 100%100%/var(--border-width) calc(50% - (var(--space) / 2));
  background-repeat: no-repeat;
}

.content {
  position: absolute;
  width: 200px;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  background: yellow;
}

<divclass="container"><divclass="content">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  </div></div>