HTML如何实现外边框四边显示不同颜色？

以上为我的代码和实现效果，外边框在设置颜色后仍为黑色
以下为需实现效果（上左外边框为深紫色，下右外边框浅紫色）

想请问大家这是怎么回事呢？该怎么解决呢？

border-color: red green 这样写两个颜色 border-top left 什么的也可以吧，可以试试看

border-top,bottom,left,right

或者