corner-top-shape

構成要素のプロパティ

corner-top-shape プロパティは、以下の物理的プロパティの一括指定です。

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

構文

/* 単一のキーワード値で両方の角を設定 */
corner-top-shape: notch;
corner-top-shape: squircle;

/* 単一の superellipse() 値で両方の角を設定 */
corner-top-shape: superellipse(3);
corner-top-shape: superellipse(-1.5);

/* 左端の角、右端の角 */
corner-top-shape: notch squircle;
corner-top-shape: notch superellipse(-1.5);

/* グローバル値 */
corner-top-shape: inherit;
corner-top-shape: initial;
corner-top-shape: revert;
corner-top-shape: revert-layer;
corner-top-shape: unset;

値

corner-top-shape プロパティは 1 つまたは 2 つの <corner-shape-value> 値で指定します。

• 1 つの値が使用された場合、上端の両方の角の形状を指定します。
• 2 つの値が使用された場合、1 つ目は左上の角、2 つ目は右上の角の形状を指定します。

公式定義

形式文法

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

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

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

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

例

その他の関連する例は、corner-shape リファレンスページにあります。

基本的な corner-top-shape の使い方

HTML

この例のマークアップには、<div> 要素が 1 つあります。

<div></div>

CSS

ボックスにいくつかの基本的なスタイルを設定していますが、簡略化のため省略します。また、box-shadow と、border-radius を 60 ピクセルに、corner-top-shape を scoop notch に適用しています。

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

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: goldenrod;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-top-shape: scoop notch;
}

結果

表示結果は次のようになります。

仕様書

ブラウザーの互換性

関連情報

• corner-shape 一括指定プロパティ
• corner-bottom-shape, corner-left-shape, corner-right-shape
• corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape
• border-radius 一括指定プロパティ
• border-top-left-radius および border-top-right-radius
• CSS 境界とボックス装飾モジュール
• CSS 背景と境界モジュール