box-sizing:border-box; not supported under IE8

box-sizing:border-box;

There is no css attribute that can directly create the effect you want, you can only simulate it

style="

border-bottom: 50px solid red;
border-top: 50px solid blue;
border-left: 50px solid white;
border-right: 50px solid black;
height: 0;
width: 0;

"

The height and width remain unchanged and the padding is set to the border

There are two implementation options,
The first one uses css pseudo-classes

    .bk{
        position: relative;
        width:100px;
        height:100px;
    }
    .bk:before{
        content:"";
        position: absolute;
        top:0;
        left:0;
        width:98px;
        height:98px;
        border:1px solid #666;
    }

The second method uses the inner shadow of the box-shadow box shadow. I won’t post the specific code. If you don’t understand, just learn it yourself.
If the subject of the question caused the layout to be damaged because of the border, you need to understand how the box model of the element is calculated.