Свойство CSS `corner-shape`

corner-shape — это CSS-сокращённое свойство, задающее форму углов блока в пределах области, определяемой значением свойства border-radius.

Составные свойства

Это свойство является сокращённой записью следующих физических свойств:

• corner-top-left-shape
• corner-top-right-shape
• corner-bottom-left-shape
• corner-bottom-right-shape

Синтаксис

/* 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;

Свойство corner-shape можно задать одним, двумя, тремя или четырьмя значениями <corner-shape-value>:

• Если задано одно значение, оно определяет форму всех четырёх углов.
• Если заданы два значения, первая форма применяется к верхнему левому и нижнему правому углам, а вторая — к верхнему правому и нижнему левому.
• Если заданы три значения, первое определяет форму верхнего левого угла, второе — верхнего правого и нижнего левого углов, а третье — нижнего правого угла.
• Если заданы четыре значения, они определяют форму верхнего левого, верхнего правого, нижнего правого и нижнего левого углов именно в таком порядке (по часовой стрелке).

Значения

<corner-shape-value>

Функция superellipse() или эквивалентное ей ключевое слово, описывающее форму угла.

Описание

Свойство corner-shape используется для изменения формы скруглённых углов, созданных свойством border-radius и связанными с ним развернутыми свойствами. Форму уже скруглённых углов можно дополнительно настраивать, изменяя степень скругления; это позволяет, например, создавать скошенные, выемчатые углы и углы в форме сквиркла. Границы, контуры, тени и фоновые эффекты контейнера будут соответствовать заданной форме углов.

Если для контейнера не задано свойство border-radius или его значение border-radius вычисляется как 0, свойство corner-shape не действует.

Сокращённое свойство corner-shape и связанные с ним сокращённые и развернутые свойства corner-*-shape принимают от одного до четырёх значений <corner-shape-value>. Каждое значение задаётся непосредственно функцией superellipse() или ключевым словом, описывающим распространённую форму. Каждому ключевому слову соответствует определённое значение superellipse().

Значение round, используемое по умолчанию (начальное значение) свойства corner-shape, даёт тот же эффект, что и border-radius без corner-shape. Также существует ключевое значение square, которое соответствует обычным прямоугольным углам и фактически удаляет все применённые эффекты border-radius. Значение bevel создаёт прямую линию между двумя концами border-radius.

Разные значения corner-shape можно плавно анимировать: в качестве значений интерполяции используются эквивалентные им значения superellipse() для ключевых слов.

Сокращённое свойство corner-shape особенно удобно, если нужно задать одинаковую форму для всех четырёх углов или установить разные значения одним объявлением. Чтобы задать форму только одного или двух углов за раз, используйте сокращённые и развернутые свойства corner-*-shape.

Сокращённые и развернутые свойства corner-*-shape

Сокращённое свойство corner-shape задаёт форму всех четырёх углов одним объявлением.

Чтобы задать форму только одного угла за раз, используйте развернутые свойства формы углов:

• Физические развернутые свойства формы углов:
  • corner-bottom-left-shape
  • corner-bottom-right-shape
  • corner-top-left-shape
  • corner-top-right-shape
• Логические развернутые свойства формы углов:
  • corner-start-start-shape
  • corner-start-end-shape
  • corner-end-start-shape
  • corner-end-end-shape

Чтобы задать форму двух углов за раз, используйте сокращённые свойства сторон:

• Физические сокращённые свойства сторон:
  • corner-top-shape
  • corner-right-shape
  • corner-bottom-shape
  • corner-left-shape
• Логические сокращённые свойства сторон:
  • corner-block-start-shape
  • corner-block-end-shape
  • corner-inline-start-shape
  • corner-inline-end-shape

Ограничение радиусов формы противоположных углов

Если для противоположных углов заданы значения border-radius и corner-shape, из-за которых формы накладываются друг на друга, браузер ограничивает эти значения, чтобы предотвратить наложение.

Например, следующие значения привели бы к наложению верхнего левого и нижнего правого углов, поэтому браузер изменяет первый компонент border-radius так, чтобы избежать этого.

div {
  width: 480px;
  height: 200px;
  background-color: goldenrod;
  border-radius: 80% 20px;
  corner-shape: scoop;
}

Свойства, следующие форме corner-shape

При задании для контейнера следующие свойства принимают форму его углов:

• background-color
• background-image
• border
• outline
• box-shadow
• overflow
• backdrop-filter

Примеры приведены в разделе Демонстрация свойств, следующих форме corner-shape.

Взаимодействие со свойством border-shape

Свойство corner-shape не действует, если для элемента задано свойство border-shape. Это связано с несовместимостью border-shape и border-radius: при задании border-shape любое указанное значение border-radius игнорируется; corner-shape зависит от border-radius и поэтому также не действует.

Если вы хотите использовать углы заданной формы в border-shape, их нужно нарисовать непосредственно как часть формы.

Формальное определение

Формальный синтаксис

corner-shape = 
  <corner-shape-value>{1,4}

<corner-shape-value> = 
  round |
  scoop |
  bevel |
  notch |
  square |
  squircle |
  <superellipse()>

<superellipse()> = 
  superellipse( [ <number> | infinity | -infinity ] )

Примеры

Базовое использование corner-shape

HTML

Разметка этого примера содержит один элемент <div>.

<div>Nice scooped corners</div>

CSS

Мы задаём блоку фиксированную height, box-shadow, border-radius размером 30 пикселей и corner-shape со значением scoop, а также некоторые дополнительные стили, опущенные для краткости.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

@supports not (corner-shape: scoop) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }
}

div {
  height: 180px;
  box-shadow: 1px 1px 3px gray;
  border-radius: 30px;
  corner-shape: scoop;
}

Результат

Отображённый результат выглядит так:

Обратите внимание: значение corner-shape свойства scoop придаёт контейнеру вогнутые углы — кривая является инверсией кривой border-radius по умолчанию. Также обратите внимание, что фон, граница и тень блока повторяют форму кривой.

Демонстрация свойств, следующих форме corner-shape

HTML

Разметка этого примера содержит один элемент <div> с текстом внутри.

<div>
  Some styles follow the corner shape, such as border, outline, box-shadow,
  overflow, and backdrop-filter. This is useful for helping various aspects of
  your design to not clash. As shown, it can result in some interesting visual
  effects, so you should test your design carefully.
</div>

CSS

Чтобы продемонстрировать, как некоторые стили повторяют форму углов контейнера, мы применяем background-image к <body> документа, а затем задаём border-radius со значением 40px и corner-shape со значением scoop notch для <div>.

Затем мы применяем к <div> следующее:

• Полупрозрачный background-color.
• Разные цвета и стили border для каждой стороны.
• backdrop-filter, инвертирующий background-image, заданный для <body>.
• Стиль :hover, позволяющий увидеть, что кликабельная область содержимого выходит за пределы формы углов.

Дополнительные стили настройки опущены для краткости.

html {
  height: 100%;
}

body {
  font-family: "Helvetica", "Arial", sans-serif;
  height: inherit;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 240px;
  height: 180px;
}

@supports not (corner-shape: scoop notch) {
  :root::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

body {
  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
    no-repeat;
  background-size: cover;
}

div {
  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%);
}

div:hover {
  background-color: white;
}

Результат

Отображённый результат выглядит так:

Обратите внимание: большинство заданных стилей повторяют форму <div>, полученную благодаря стилям corner-shape, но не все. Содержимое отображается относительно исходного блока, а эффект при наведении по-прежнему применяется, если навести курсор на текст, выступающий за верхний и нижний левый углы.

Сравнение значений corner-shape

В этой демонстрации можно выбрать разные значения corner-shape и задать контейнеру разные значения border-radius, чтобы сравнить результаты.

HTML

Разметка этого примера содержит средство выбора <select>, в котором можно выбрать разные значения corner-shape, ползунок <input type="range"> для выбора разных значений border-radius и элемент <section>, создающий контейнер для применения этих значений. Элементы <option> списка выбора предлагают несколько вариантов ключевых слов и значений superellipse(), разделённых на две группы с помощью элементов <optgroup>. Для значений-ключевых слов мы также указали эквивалентное значение superellipse(), отделив его вертикальной чертой.

<form>
  <div>
    <label for="corner-shape-choice">Choose a corner-shape value:</label>
    <select id="corner-shape-choice">
      <optgroup label="Keywords">
        <option value="square">square | superellipse(infinity)</option>
        <option selected value="squircle">squircle | superellipse(2)</option>
        <option value="round">round | superellipse(1)</option>
        <option value="bevel">bevel | superellipse(0)</option>
        <option value="scoop">scoop | superellipse(-1)</option>
        <option value="notch">notch | superellipse(-infinity)</option>
      </optgroup>
      <optgroup label="Functions">
        <option>superellipse(3)</option>
        <option>superellipse(1.5)</option>
        <option>superellipse(0.5)</option>
        <option>superellipse(-0.5)</option>
        <option>superellipse(-1.5)</option>
        <option>superellipse(-3)</option>
      </optgroup>
    </select>
  </div>
  <div>
    <label for="radius-slider">Choose a border-radius value:</label>
    <input
      type="range"
      id="radius-slider"
      min="0"
      value="45"
      max="90"
      step="1" />
  </div>
</form>
<section></section>

CSS

Мы применяем box-shadow к <section>. Также задаём <section> и элементам формы базовые стили, опущенные для краткости.

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: fit-content;
  margin: 20px auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

select {
  padding: 3px 5px;
}

form div:nth-of-type(2) {
  margin-top: 5px;
  display: flex;
}

section {
  width: 100%;
  height: 180px;
  background-color: gold;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

@supports not (corner-shape: scoop) {
  :root::before {
    content: "Your browser does not support the 'corner-shape' property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

section {
  box-shadow: 1px 1px 3px gray;
}

const rectangle = document.querySelector("section");
const select = document.querySelector("select");
const range = document.getElementById("radius-slider");

function setCorners() {
  rectangle.style.cornerShape = select.value;
  const brValue = `${range.value}px`;
  rectangle.style.borderRadius = brValue;
  rectangle.innerHTML = `<div><code>corner-shape: ${select.value};</code><br><code>border-radius: ${brValue};</code></div>`;
}

select.addEventListener("change", setCorners);
range.addEventListener("input", setCorners);
setCorners();

Код JavaScript, применяющий выбранные пользователем значения к <section>, опущен для краткости.

Результат

Отображённый результат выглядит так:

Попробуйте выбрать разные значения, чтобы увидеть, как они влияют на форму углов.

Сравнение значений superellipse()

В этом примере представлены два ползунка <input type="range">, позволяющие перебирать множество значений corner-shape superellipse() и значений border-radius, чтобы сравнить влияние каждого из них на контейнер.

HTML

Разметка этого примера содержит два элемента <input type="range">, с помощью которых можно выбрать разные значения corner-shape superellipse() и border-radius, а также элемент <section>, к которому применяются эти значения.

<form>
  <div>
    <label for="superellipse-slider">Choose a superellipse() value:</label>
    <input
      type="range"
      id="superellipse-slider"
      min="-5"
      value="0"
      max="5"
      step="0.1" />
  </div>
  <div>
    <label for="radius-slider">Choose a border-radius value:</label>
    <input
      type="range"
      id="radius-slider"
      min="0"
      value="45"
      max="90"
      step="1" />
  </div>
</form>
<section></section>

CSS

Мы применяем box-shadow к элементу <section>. Дополнительные базовые стили опущены для краткости.

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: fit-content;
  margin: 20px auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

form div {
  margin-top: 5px;
  display: flex;
}

section {
  width: 100%;
  height: 180px;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

@supports not (corner-shape: superellipse(0)) {
  :root::before {
    content: "Your browser does not support the 'corner-shape' property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

section {
  box-shadow: 1px 1px 3px gray;
}

const rectangle = document.querySelector("section");
const superEllipseRange = document.getElementById("superellipse-slider");
const borderRadiusRange = document.getElementById("radius-slider");

function setCorners() {
  const seValue = `superellipse(${superEllipseRange.value})`;
  rectangle.style.cornerShape = seValue;
  const brValue = `${borderRadiusRange.value}px`;
  rectangle.style.borderRadius = brValue;
  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;
}

superEllipseRange.addEventListener("input", setCorners);
borderRadiusRange.addEventListener("input", setCorners);
setCorners();

Код JavaScript, применяющий выбранные пользователем значения к <section>, опущен для краткости.

Результат

Отображённый результат выглядит так:

Попробуйте выбрать разные значения, чтобы увидеть, как они влияют на форму углов.

Анимация corner-shape

В этом примере показано, как можно анимировать свойство corner-shape.

HTML

<div></div>

CSS

Мы создаём набор правил @keyframes, плавно анимирующих переход между значениями corner-shape свойств square и notch. Затем мы применяем animation на основе этих @keyframes к <div>, когда наводят курсор на содержащий его элемент <html> или переводят его в фокус. Дополнительные базовые стили <div> опущены для краткости.

body {
  width: 200px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 200px;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
  box-shadow: 1px 1px 3px gray;
  border-radius: 50%;
  corner-shape: square;
  outline: none;
}

@supports not (corner-shape: square) {
  :root::before {
    content: "Your browser does not support the 'corner-shape' property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

@keyframes corner-pulse {
  0% {
    corner-shape: square;
  }

  /* To make the starting point apparent, let us keep
  the shape the same for a small duration. */
  20% {
    corner-shape: square;
  }

  100% {
    corner-shape: notch;
  }
}

div {
  animation: corner-pulse infinite alternate 4s linear;
}

Результат

Отображённый результат выглядит так:

Спецификации

Совместимость с браузерами

См. также

• border-radius
• border-shape
• Модуль границ и декораций блоков CSS
• Модуль фонов и границ CSS
• Модуль анимаций CSS