如何用CSS实现左右两侧长短不一的双边框效果

你的问题出在只给右侧通过渐变实现了短边框，左侧仅有常规边框，所以缺失那条短边框。只需给background属性添加左侧的渐变层，就能让左右两侧都呈现一长一短的双边框效果：

修改后的CSS代码：

.double-border {
  --b: 2px; /* 边框厚度 */
  --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,
    linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat;
}

另外你的HTML存在两处小错误，顺手修正：

• <a hreff="">里的hreff多了一个f，应为href
• 末尾多了一个多余的</a>标签，需删除

修改后的HTML代码：

<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 href="">link</a>
</div>

简单说明：

• 常规的border-left/border-right实现了两侧的长边框
• 两个linear-gradient分别定位在左右底部，宽度为边框厚度、高度为元素的50%，且距离边缘10px，以此实现短边框效果

内容的提问来源于stack exchange，提问作者Beep