四角为直角样式

 

 

<div class="zhiJiaoBox">
    <div class="zhiJiao">四角直角</div>
</div>

.zhiJiaoBox{
    width: 400px;
    height: 400px;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.zhiJiao{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 核心代码 */
    border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, #999 100%);
    border-image-slice: 1;
    border-width: 1px;
    border-style: solid;
    border-image-outset: 1cm;
    /* 核心代码 end */
}