如何将边界划分为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