Как сделать карточку CSS c вырезом по бокам?
В теории можно, но возни много. Всё "рисование на css" сводится к разделению фигур на более простые составляющие, реализуемые через css. Вот вам пару вариантов реализации (справа и слева):

И да, бордер при этом можно будет реализовать (в крайнем случае через перекрытие элементов).

UPD: Проще всего, кстати, построить эту фигуру по вертикали: прямоугольник с закругленными верхними углами, две узких равнобедренных трапеции, прямоугольник с закругленными нижними углами:

Я думаю вам подойдут псевдоэлементы. Типо:

<div class="container">
</div>

.container{
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}
.container:after{
  content:"";
  position: absolute;
  top: 45%;
  left: 0px;
  transform: translateX(-20%);
  transform: rotate(-90deg);
  border:15px solid;
  border-color: #fff transparent transparent transparent;
}

.container:before{
  content:"";
  position: absolute;
  top: 45%;
  right: 0px;
  transform: translateX(-20%);
  transform: rotate(90deg);
  border:15px solid;
  border-color: #fff transparent transparent transparent;
}

p.s только кроссбраузерностью сами займитесь