如何将边界划分为4个相等的部分？

Question

例如，我有一个矩形：

<div id="rec">
</div>

CSS：

#rec {
  width: 100px;
  height: 100px;
  background: black;
  border: solid;
  border-width: 3px;
  border-color: red;
}

JSFIDDLE： https://jsfiddle.net/tquq01hq/

我想将边框划分为4个相等的部分，每个部分将采用不同的颜色。有什么建议吗？

Answer 1

除以边框颜色值border-color: red green blue grey;

#rec {
  width: 100px;
  height: 100px;
  background: black;
  border: solid;
  border-width: 3px;
  border-color: red green blue grey;
}

<强> DEMO