How to cut corners off a div?

Question

css

Hello. I wanted to know if it is possible to cut out the corners in the div block using the css method, as shown in the figure? Or is only the old way with pictures suitable for this option?

Answer 1

Through a radial gradient.
jsfiddle.net/z3my1cfg

Answer 2

There is such a feature - border-corner-shape, although it seems to have been cut out of the spec. Here Lea Verou talks about her. But the demo is also from Lea Verou, in the code you will see how these corners are implemented through SVG.
Here , too, the dude asks how to make corners, through the border-corner-shape, they answer him that this is not yet in the specs and offer working options)

Answer 3

Can be done via border-image: a background color image with transparent segments in the corners. And with the help border-image-outsetadjust the contact between the border and the background.
This is the “new” way, but still with pictures.

Answer 4

There is an option that will only work in chrome.
svgmask.svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 80 40"
  
  width="80"
  height="40"
  id="svg2">

  <path
  id="c2"
  d="
  M5,0
  L5,0
  l70,0
  v0
  c0,2.8,2.2,5,5,5
  h0
  v30
  h0
  c-2.8,0-5,2.2-5,5
  v0
  H5
  v0
  c0-2.8-2.2-5-5-5
  h0
  V5
  h0
  C2.8,5,5,2.8,5,0
  z"/>
</svg>

in HTML:
css:

.mask01{
    mask-box-image: url("svgmask.svg") 5 round;
    -webkit-mask-box-image: url("svgmask.svg") 5 round;
  }

The trick is that this method works with frames that have pictures and the size of the "rounded in the opposite direction" corners must be fixed.