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%, #1698d90%), 
  radial-gradient(circle at bottom left, transparent 40%, #1698d90%), 
  radial-gradient(circle at top right, transparent 40%, #1698d90%), 
  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, #1698d928px, #1698d932px, transparent 10px);
  background-position: 
  bottom right, 
  top right, 
  bottom left, 
  top right, 
  top right, 
  bottom left, 
  bottom left, 
  top left;
  background-size: 
  10px10px, 10px10px, 10px10px, 
  calc(100% - 40px) 4px, 
  4px100%, 
  100%4px, 
  4pxcalc(100% - 40px), 
  100%100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  width: 320px;
}
body {
 background-image:linear-gradient(30deg, pink, yellow);
}

<divclass="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: 0010px10px;
  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: 010px00;
}

body {
  background-image: linear-gradient(30deg, pink, yellow);
}

<divclass="test-block"></div>