Сделать сторону границы «сплюснутой» или угловой внутрь, как диагональный разрез вместо прямого края ⇐ Html

[Anonymous]

До сих пор следующий код создал то, что я хочу, но проблема в том, что желаемая форма в углу теперь не имеет цвета границы.

Код: Выделить всё

< /code>
css: < /p>
.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;
}

Прямо сейчас это то, что он выглядит как недостающий цвет границы в этой стороне сплющенной:

и это так, как на грани />

Подробнее здесь: https://stackoverflow.com/questions/797 ... nal-cut-in