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

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

Complete design Fiddle

.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;
}

or SVG

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

svg {
  overflow: visible;
}

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

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

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

h3 {
  margin: 0;
}