Bevel Corners, Background Not Rounded

I have a figure with bevel corners, but the background is not rounded: How to have it rounded?

Solution 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>