CSS Border problems using pseudo elements [duplicate] - css

Question

This question already has answers here:
Add rounded borders to selected corners of an element
(2 answers)
Closed 5 years ago.
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>