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