html边框四个角加粗,前端css写出如图示的样式，四个角颜色以及div的线条

代码如下：

Document

body {

display: flex;

justify-content: center;

flex-direction: column;

align-items: center;

}

.main {

position: relative;

width: 300px;

height: 100px; // 宽高可以随意调整

border: 1pxsolidrgb(0, 255, 242);

border-radius: 8px;

}

.main span {

position: absolute;

padding: 15px;

border-style: solid;

border-color: rgb(114, 243, 237);

}

.main span:nth-child(1) {

left: -15px;

top: -15px;

border-width: 5px 0 0 5px;

border-top-left-radius: 8px;

}

.main span:nth-child(2) {

right: -15px;

top: -15px;

border-width: 5px 5px 0 0;

border-top-right-radius: 8px;

}

.main span:nth-child(3) {

right: -15px;

bottom: -15px;

border-width: 0 5px 5px 0;

border-bottom-right-radius: 8px;

}

.main span:nth-child(4) {

left: -15px;

bottom: -15px;

border-width: 0 0 5px 5px;

border-bottom-left-radius: 8px;

}

css实现矩形边角加粗