I would like my double border with one line shorter than the other left and right.
the left is current only 1 line missing the smaller one
.double-border {
--b: 2px; /* thickness */
--c: #3CD5AF;
height: 100%;
border-right: var(--b) solid var(--c);
border-left: var(--b) solid var(--c);
background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
} <div class="col-lg-8 double-border">
<h4>About the episode subhead lorem ipsum 1</h4>
<p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt.</p>
<a hreff="">link</a></a>
</div>
>Solution :
Just use two background gradients.
.double-border {
--b: 2px;
/* thickness */
--c: #3CD5AF;
height: 100%;
border-right: var(--b) solid var(--c);
border-left: var(--b) solid var(--c);
background:
linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat,
linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}
div {
padding: 0 2em;
}<div class="col-lg-8 double-border">
<h4>About the episode subhead lorem ipsum 1</h4>
<p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt.</p>
<a hreff="">link</a></a>
</div>