Круглые вогнутые уголки

by Ankhena

HTML

<div class="round"></div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 20px;
  margin: 0;
  background: linear-gradient(violet, orange, yellow, violet);
}

.round {
  width: 200px;
  height: 200px;
  background:
    radial-gradient(15px at top left, transparent 14px, #c00 15px),
    radial-gradient(15px at top right, transparent 14px, #c00 15px),
    radial-gradient(15px at bottom right, transparent 14px, #c00 15px),
    radial-gradient(15px at bottom left, transparent 14px, #c00 15px);
  background-position: top left, top right, bottom right, bottom left;

  background-size: 50% 50%;
  background-repeat: no-repeat;
}

/* без разницы какое число ставить в 15px at top left */