css的伪元素做边框对角,使用伪元素的CSS边框问题

我已经创建了一个破碎的边框效果，但我不想在边框的末端进行锐利的外观，我希望它可以装箱。我已经搞砸了border-radius和我所能想到的一切，但不能想到任何事情。任何输入将不胜感激。使用伪元素的CSS边框问题

我想它看起来像这样：

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

Option 1

option 2

option 3

option 4

option 5