Властивість corner-shape

Усі можливі варіанти corner-shape:

На сьогодні (згідно зі специфікаціями 2026 року) існують такі основні значення:

• round - Стандартне кругле закруглення (дефолт).
• bevel - Прямий зріз під кутом (фаска), про який ти питав раніше.
• scoop - Ввігнута всередину кругла дуга.
• notch - Прямокутний "сходинковий" виріз.

/* Single value set for all four corners */
corner-shape: bevel;

/* top-left and bottom-right, top-right and bottom-left */
corner-shape: notch superellipse(0.6);

/* top-left, top-right and bottom-left, bottom-right */
corner-shape: superellipse(-1.2) square squircle;

/* top-left, top-right, bottom-right, bottom-left */
corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;

/* Global values */
corner-shape: inherit;
corner-shape: initial;
corner-shape: revert;
corner-shape: revert-layer;
corner-shape: unset;

.romb {
  border-radius: 40px;
  corner-shape: scoop notch;
  background-color: rgb(255 255 255 / 0.2);
  border-top: 3px solid blue;
  border-left: 6px dashed red;
  border-bottom: 9px solid yellow;
  border-right: 12px double green;
  backdrop-filter: invert(100%);
}

Виконуваний код: