`<corner-shape-value>` — тип CSS

<corner-shape-value> — это CSS-тип данных, описывающий форму угла контейнера. Он используется в сокращённом свойстве corner-shape и его составных свойствах для задания формы углов контейнера.

Синтаксис

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

Значения

superellipse()

Задаёт пользовательскую форму угла в виде суперэллипса. Отрицательный параметр создаёт кривую, направленную внутрь (вогнутую), а положительный — наружу (выпуклую).

Ключевые слова

Доступны следующие ключевые слова:

bevel

Задаёт прямой диагональный угол, который не является ни выпуклым, ни вогнутым. Ключевое слово bevel эквивалентно superellipse(0).

notch

Задаёт вогнутый квадратный угол в 90 градусов. Ключевое слово notch эквивалентно superellipse(-infinity).

round

Задаёт выпуклый обычный эллипс — стандартный скруглённый угол, создаваемый свойством border-radius без применения corner-shape. Ключевое слово round эквивалентно superellipse(1). Это значение по умолчанию (начальное значение) для всех свойств corner-shape.

scoop

Задаёт вогнутый обычный эллипс. Ключевое слово scoop эквивалентно superellipse(-1).

square

Задаёт выпуклый квадратный угол в 90 градусов. Это форма угла по умолчанию, если не применено border-radius (или border-radius: 0). Ключевое слово square эквивалентно superellipse(infinity).

squircle

Задаёт «сквиркл» — выпуклую кривую, промежуточную между round и square. Ключевое слово squircle эквивалентно superellipse(2).

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

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

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

Примеры

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

В этом примере мы добавили раскрывающееся меню для выбора разных значений <corner-shape-value> и ползунок для изменения свойства контейнера border-radius. Это позволяет визуально сравнить эффекты разных ключевых слов и значений параметра superellipse().

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

<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>

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: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

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();

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

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

См. также

• corner-shape
• border-radius
• superellipse()
• Границы CSS и оформление блоков — модуль