Css DIV border底部颜色属性两种颜色

我有一个div，它包含一个站点头。div有一个

边框底色：#ff6600它创建了一条横跨div宽度的橙色线。我想看看是否可以在border bottom color属性上设置一个开始/结束点，使其具有从div的远边缩进的开始和结束外观

:

您可以使用伪元素而不是边框


div{
宽度：100px；
高度：40px；
背景：浅灰色；
位置：相对位置；
}
部门：之后{
内容：''；
显示：块；
宽度：90%；
高度：1px；
位置：绝对位置；
最高：100%；
左：50%；
左边缘：-45%；
背景：橙色；
}
例如，您可以在一个div中添加一个div。第一个无边框div和一个带边框的内部div。范例

<div style="width:200px;height:100px; border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:0px solid #000000; margin-left:10px;margin-right:10px;">


    <div style="width:180px;height:100px; border-left:0px solid #000000;border-right:0px solid #000000;border-top:0px solid #000000;border-bottom:1px solid red; margin-left:10px;margin-right:10px;"></div>


</div>



我为你做了一个小提琴演示

这也是我最初的想法。我想当我尝试的时候，已经太晚了，没有任何东西能正常工作。谢谢你的帮助。