how to create top left and bottom right border with different color?

Question

I'm trying to create a border on a div with two different color on the top left and the bottom right. Can't find solution, with images or directly on css.

Answer 1

Please refer the below example.

You can use position set toabsolute for the two red sections and they can be positioned with respect to the div with class box, which has its position set to relative.

.box {
  background-color: gray;
  height: 400px;
  width: 400px;
  position: relative;
}

.top-left {
  position: absolute;
  top: 10px;
  left: 10px;
  border-left: 10px solid darkblue;
  border-top: 10px solid darkblue;
  height: 30px;
  width: 30px;
}

.bottom-right {
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-bottom: 10px solid red;
  border-right: 10px solid red;
  height: 30px;
  width: 30px;
}

<div class="box">
  <div class="top-left"></div>
  <div class="bottom-right"></div>
</div>