如何在css中编码不同类型的边框？

如何在css中编码不同类型的边框？
我想在html模板中设计一组边框样式。有时我会感到困惑，是应该在一个特殊的css选择器（如.hello）下添加一些边框css代码，还是应该将边框样式分离到一个边框css组中。我现在正在使用sass+引导。我想给我一些做这项工作的原则

<div class="box bodered">has border around box</div>
<div class="box bodered dotted">border type is dotted</div>
<div class="box bodered type_1">border type with image shadow effort</div>

<div class="box bordered top">only has border at top</div>
<div class="box bordered left">only has border at left</div>
<div class="box bordered right">only has border at right</div>
<div class="box bordered bottom">only has border at bottom</div>

框周围有边框
边框类型为虚线
具有图像阴影效果的边框类型
顶部只有边框
左边只有边界
右边只有边界
底部只有边框

我不确定您是否需要

bordered

类，因为每个变体都需要指定大多数border属性。这在HTML中有很多表示。

       .box{ border-color:#000000;}
       .bodered{ border:1px solid inherit;}
       .dotted{ border-style:dotted;}
       .top{border:none; border-top:1px solid #00000;}
       .left{border:none;border-left:1px solid #00000;}
       .right{border:none;border-right:1px solid #00000;}
       .bottom{border:none;border-bottom:1px solid #00000;}