[SOLVED] Making the side of a border “flattened” or angled inward, like a diagonal cut instead of a straight edge

Making the side of a border “flattened” or angled inward, like a diagonal cut instead of a straight edge

So far the following code has produced what I want but the problem is that the desired shape in the corner now does not have border color.

<div class="main-container">
    
</div>

The CSS:

.main-container{
    border-color: #DCDCDC;
    //sides
    border-bottom: 4px solid #DCDCDC;
    border-top: 5px solid #DCDCDC;
    border-right: 4px solid #DCDCDC;
    border-left: 3px solid #DCDCDC;

    //border rounding stlye
    clip-path: polygon(
        20px 0,         /* start 20px from top-left horizontally */
        100% 0,         /* top-right corner */
        100% 100%,      /* bottom-right corner */
        0 100%,         /* bottom-left corner */
        0 20px          /* up from bottom-left to flatten */
    );

    border-top-right-radius: 2%;
    border-bottom-right-radius: 2%;
    border-bottom-left-radius: 1%;

    width: 150px;
    height: 250px;
}

Right now this is what it looks like missing border color in that side flattened:

And this is how the border should look like:

Solution

I suggest making a wrapper that will serve as a border

.border {
  position: relative;

  width: 150px;
  height: 250px;

  background-color: #DCDCDC;

  border-top-right-radius: 2%;
  border-bottom-right-radius: 2%;
  border-bottom-left-radius: 1%;

  clip-path: polygon(20px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 20px);
}

.main-container {
  position: absolute;

  top: 5px;
  right: 4px;
  bottom: 4px;
  left: 3px;

  background-color: #FFF;

  clip-path: polygon(20px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 20px);
}

<div class="border">
  <div class="main-container"></div>
</div>