corner-shape

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

corner-shape 是一個簡寫 CSS 屬性，用於在其 border-radius 屬性值指定的區域內，指定盒子邊角的形狀。

語法

css

/* 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() 值。

corner-shape 的預設（初始）值是 round，其效果與單獨使用 border-radius 而不使用 corner-shape 相同。還有一個關鍵字值 square，其效果與預設的方角相同，有效地移除了任何已應用的 border-radius。bevel 值的效果是在 border-radius 的兩個端點之間畫一條直線。

不同的 corner-shape 值之間可以平滑地進行動畫，因為關鍵字值的 superellipse() 等效形式被用作插值。

當希望所有四個邊框都相同時，或者希望使用單個宣告設定不同的值時，corner-shape 簡寫屬性特別有用。要一次只設置一個或兩個角的形狀，請使用 corner-*-shape 簡寫和普通屬性。

`corner-*-shape` 簡寫和普通屬性

corner-shape 簡寫屬性在一個宣告中定義所有四個角的形狀。

要一次只設置一個角的形狀，請使用角的普通屬性：

物理普通角形狀屬性
邏輯普通角形狀屬性

要一次設定兩個角的形狀，請使用邊簡寫屬性：

物理邊簡寫屬性
邏輯邊簡寫屬性

限制對角形狀半徑

當對角的 border-radius 和 corner-shape 值設定可能導致形狀重疊時，瀏覽器會限制這些值以防止重疊。

例如，以下值會導致左上角和右下角重疊，因此瀏覽器會調整第一個 border-radius 分量的值以避免這種情況。

css

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

遵循角形狀的屬性

當在容器上設定時，以下所有屬性都會遵循角的形狀：

有關示例，請參閱遵循 corner-shape 的屬性演示。

正式語法

corner-shape = 
  <'corner-top-left-shape'>{1,4}  

<corner-top-left-shape> = 
  <corner-shape-value>  

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

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

示例

`corner-shape` 的基本用法

HTML

此示例的標記包含一個單獨的 <div> 元素。

html

<div>Nice scooped corners</div>

CSS

我們為盒子設定了固定的 height、一個 box-shadow、30 畫素的 border-radius 和 scoop 的 corner-shape，以及一些為簡潔起見而隱藏的其他樣式。

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

  body > * {
    display: none;
  }
}

css

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

結果

渲染結果如下所示：

請注意 scoop 的 corner-shape 值如何使容器的角呈凹形——曲線是預設 border-radius 曲線的反轉。另請注意背景、邊框和盒陰影如何遵循曲線的形狀。

遵循 `corner-shape` 的屬性演示

HTML

此示例的標記包含一個單獨的 <div> 元素，其中包含一些文字內容。

html

<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

為了演示某些樣式如何遵循容器角的形狀，我們對文件 <body> 應用了一個 background-image，然後對 <div> 應用了 40px 的 border-radius 和 scoop notch 的 corner-shape。

然後，我們對 <div> 應用以下內容：

一個半透明的 background-color。
每條邊上不同顏色和樣式的 border。
一個 backdrop-filter，它反轉了在 <body> 上設定的 background-image。
一個 :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) {
  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;
  }

  body > * {
    display: none;
  }
}

css

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> 元素，用於建立一個應用這些值的容器。select 的 <option> 元素提供了多個關鍵字和 superellipse() 值選項，使用 <optgroup> 元素分為兩組。對於關鍵字值，我們還包括了每個關鍵字的 superellipse() 等效值，用管道符分隔。

html

<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

我們對 <section> 應用了一個 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;
}

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

  body > * {
    display: none;
  }
}

css

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

將使用者選擇的值應用於 <section> 的 JavaScript 程式碼為簡潔起見已隱藏。

結果

渲染結果如下所示：

嘗試選擇不同的值，看看這如何影響角的形狀。

`superellipse()` 值比較

在此示例中，我們提供了兩個 <input type="range"> 滑塊，讓你可以迴圈瀏覽許多不同的 corner-shape superellipse() 值和 border-radius 值，以比較它們各自對容器的影響。

HTML

此示例的標記包含兩個 <input type="range"> 元素，可以從中選擇不同的 corner-shape superellipse() 和 border-radius 值，以及一個 <section> 元素來應用這些值。

html

<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

我們對 <section> 元素應用了一個 box-shadow。為簡潔起見，已隱藏其他基本樣式。

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

  body > * {
    display: none;
  }
}

css

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

將使用者選擇的值應用於 <section> 的 JavaScript 程式碼為簡潔起見已隱藏。

結果

渲染結果如下所示：

嘗試選擇不同的值，看看這如何影響角的形狀。

為 `corner-shape` 新增動畫

在此示例中，我們演示瞭如何為 corner-shape 屬性新增動畫。

HTML

html

<div></div>

CSS

我們建立了一組 @keyframes，它們在 square 和 notch 的 corner-shape 值之間平滑地進行動畫。然後，當包含它的 <html> 元素被懸停或聚焦時，我們將基於這些 @keyframes 的 animation 應用於 <div>。為簡潔起見，已隱藏其他基本的 <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) {
  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;
  }

  body > * {
    display: none;
  }
}

css

@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;
}

結果

渲染結果如下所示：

規範

規範
CSS Borders and Box Decorations Module Level 4 # propdef-corner-shape

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ⁨2025 年 10 月 13 日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題

corner-shape

構成屬性

語法

值

描述

`corner-*-shape` 簡寫和普通屬性

限制對角形狀半徑

遵循角形狀的屬性

正式定義

正式語法

示例

`corner-shape` 的基本用法

HTML

CSS

結果

遵循 `corner-shape` 的屬性演示

HTML

CSS

結果

比較 `corner-shape` 的值

HTML

CSS

結果

`superellipse()` 值比較

HTML

CSS

結果

為 `corner-shape` 新增動畫

HTML

CSS

結果

規範

瀏覽器相容性

另見

幫助改進 MDN