CSS Border problems using pseudo elements

Question

I have created a broken border effect but I do not want the sharp look on the end of the border I would like it boxed off. I have messed with border-radius and everything i can think of but cant think of anything. Any input would be much appreciated.

I would like for it to look like this:

.container{padding-top: 40px;}
a h3{margin-top:0!important;}
.col-sm-15{
  width: 18%;
  margin:1%; 
  height: 4em;
  float:left;
  position:relative;
}
.col-sm-15 .wrap:before{
  content: '';
  position: absolute;
  width: 50%;
  height: calc(100% - 10px);
  bottom: 0;
  left: 0;
  border: 10px solid transparent;
  border-bottom-color: #330099;
  border-left-color: #330099;
}
.col-sm-15 .wrap:after{
  content: '';
  position: absolute;
  width: 50%;
  height: calc(100% - 10px);
  top: 0;
  right: 0;
  border: 10px solid transparent;
  border-top-color: #330099;
  border-right-color:#330099;
}
a h3{
  font-size: 20px;
  color: #000000; 
  padding: 10px;
  margin-top: 3.2em;
}
a:hover{text-decoration: none;}
a:hover h3{color: #330099;}

<section id="funnnels">
<div class="container">
  <div class="row padd">
    
    <div class="col-sm-15 text-center">
      <a href="#">
        <div class="wrap">
          <h3>Option 1</h3>
        </div>
      </a>
      <div class="clearfix"></div>
    </div>
    <div class="col-sm-15 text-center">
      <a href="#">
        <div class="wrap">
          <h3>option 2</h3>
        </div>
      </a>
      <div class="clearfix"></div>
    </div>
    <div class="col-sm-15 text-center">
      <a href="#">
        <div class="wrap">
          <h3>option 3</h3>
        </div>
      </a>
      <div class="clearfix"></div>
    </div>
    <div class="col-sm-15 text-center">
      <a href="#">
        <div class="wrap">
          <h3>option 4</h3>
        </div>
      </a>
      <div class="clearfix"></div>
    </div>
    <div class="col-sm-15 text-center">
      <a href="#">
        <div class="wrap">
          <h3>option 5</h3>
        </div>
      </a>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
</section>

Answer 1

Do like this instead and the border doesn't get a sharp end

border-bottom: 10px solid #330099;
border-left: 10px solid #330099;

I also reduced the height a little more than the set 10px, to 30px (height: calc(100% - 30px);)

Stack snippet

.container {
  padding-top: 40px;
}

a h3 {
  margin-top: 0!important;
}

.col-sm-15 {
  width: 18%;
  margin: 1%;
  height: 4em;
  float: left;
  position: relative;
}

.col-sm-15 .wrap:before {
  content: '';
  position: absolute;
  width: 50%;
  height: calc(100% - 30px);
  bottom: 0;
  left: 0;
  border-bottom: 10px solid #330099;
  border-left: 10px solid #330099;
}

.col-sm-15 .wrap:after {
  content: '';
  position: absolute;
  width: 50%;
  height: calc(100% - 30px);
  top: 0;
  right: 0;
  border-top: 10px solid #330099;
  border-right: 10px solid #330099;
}

a h3 {
  font-size: 20px;
  color: #000000;
  padding: 10px;
  margin-top: 3.2em;
}

a:hover {
  text-decoration: none;
}

a:hover h3 {
  color: #330099;
}

<section id="funnnels">
  <div class="container">
    <div class="row padd">

      <div class="col-sm-15 text-center">
        <a href="#">
          <div class="wrap">
            <h3>Option 1</h3>
          </div>
        </a>
        <div class="clearfix"></div>
      </div>
      <div class="col-sm-15 text-center">
        <a href="#">
          <div class="wrap">
            <h3>option 2</h3>
          </div>
        </a>
        <div class="clearfix"></div>
      </div>
      <div class="col-sm-15 text-center">
        <a href="#">
          <div class="wrap">
            <h3>option 3</h3>
          </div>
        </a>
        <div class="clearfix"></div>
      </div>
      <div class="col-sm-15 text-center">
        <a href="#">
          <div class="wrap">
            <h3>option 4</h3>
          </div>
        </a>
        <div class="clearfix"></div>
      </div>
      <div class="col-sm-15 text-center">
        <a href="#">
          <div class="wrap">
            <h3>option 5</h3>
          </div>
        </a>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</section>