Bevel corners, background not rounded - html

Question

I have a figure with bevel corners, but the background is not rounded:
How to have it rounded?
.test-block {
height: 480px;
padding: 4px;
color: #ffffff;
background-color: transparent;
background-image:
-webkit-linear-gradient(top, #ffdc00, #ffdc00),
-webkit-linear-gradient(225deg, #ffdc00, #ffdc00),
-webkit-linear-gradient(bottom, #ffdc00, #ffdc00),
-webkit-linear-gradient(left, #ffdc00, #ffdc00),
-webkit-linear-gradient(315deg, transparent 9px, #ffdc00 10px, #ffdc00 12px, red 12px);
background-image:
linear-gradient(180deg, #1698d9, #1698d9),
linear-gradient(225deg, #1698d9, #1698d9),
linear-gradient(0deg, #1698d9, #1698d9),
linear-gradient(90deg, #1698d9, #1698d9),
linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, #ffffff 10px);
background-position: top right, top right, bottom left, bottom left, top left;
background-size: -webkit-calc(100% - 15px) 2px, 2px 100%, 100% 2px, 2px -webkit-calc(100% - 15px), 100% 100%;
background-size: calc(100% - 40px) 4px, 4px 100%, 100% 4px, 4px calc(100% - 40px), 100% 100%;
background-repeat: no-repeat;
border-radius: 10px;
width: 320px;
}
.test-block__div {
background-image: url(http://css-snippets.com/blogfile/wp-content/uploads/2011/03/square.jpg);
background-repeat: no-repeat;
background-position: -24px 208px;
height: 100%;
}
<div class="test-block">
<div class="test-block__div"></div>
</div>

Answer 1

Since you are using multiple background you can add more using radial-gradiant to create the corner (I removed the vendor prefixes to simplify the code)
.test-block {
height: 480px;
padding: 4px;
color: #ffffff;
background-color: transparent;
background-image:
radial-gradient(circle at top left, transparent 40%, #1698d9 0%),
radial-gradient(circle at bottom left, transparent 40%, #1698d9 0%),
radial-gradient(circle at top right, transparent 40%, #1698d9 0%),
linear-gradient(180deg, #1698d9, #1698d9),
linear-gradient(225deg, #1698d9, #1698d9),
linear-gradient(0deg, #1698d9, #1698d9),
linear-gradient(90deg, #1698d9, #1698d9),
linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, transparent 10px);
background-position:
bottom right,
top right,
bottom left,
top right,
top right,
bottom left,
bottom left,
top left;
background-size:
10px 10px, 10px 10px, 10px 10px,
calc(100% - 40px) 4px,
4px 100%,
100% 4px,
4px calc(100% - 40px),
100% 100%;
background-repeat: no-repeat;
border-radius: 10px;
width: 320px;
}
body {
background-image:linear-gradient(30deg, pink, yellow);
}
<div class="test-block">
</div>
By the way you can achieve the same layout using pseudo-element and without multiples background. It can be easier to handle:
.test-block {
height: 440px;
padding: 4px;
margin-top: 60px;
color: #ffffff;
border-right: 4px solid #1698d9;
border-left: 4px solid #1698d9;
border-bottom: 4px solid #1698d9;
border-radius: 0 0 10px 10px;
width: 320px;
position: relative;
}
.test-block:before {
content: "";
position: absolute;
left: -4px;
width: 50%;
height: 40px;
top: -44px;
border-left: 4px solid #1698d9;
border-top: 4px solid #1698d9;
transform: skewX(-40deg);
transform-origin: bottom left;
}
.test-block:after {
content: "";
position: absolute;
right: -4px;
height: 40px;
width: 50%;
top: -44px;
border-right: 4px solid #1698d9;
border-top: 4px solid #1698d9;
border-radius: 0 10px 0 0;
}
body {
background-image: linear-gradient(30deg, pink, yellow);
}
<div class="test-block">
</div>