html 四个角的颜色

html

 <div class="box"></div>

css

.box {
        width: 100px;
        height: 100px;
        border: 1px solid deeppink;
        position: absolute;
    }  
  .box::before {
      content: '';
      width: 80%;
      height: 100%;
      border-bottom: 1px solid #ddd;
      border-top: 1px solid #ddd;
      bottom: -1px;
      position: absolute;
      top: -1px;
      left: 10%;
  }
  .box::after {
      content: '';
      width: 100%;
      height: 80%;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      position: absolute;
      left: -1px;
      right: -1px;
      top: 10%;
  }

效果: