corner-top-right-shape

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

corner-top-right-shape は CSS のプロパティで、ボックスの右上の角の border-radius 領域における形状を指定します。

全体的な角の形状の解説と複数の例については、corner-shape 一括指定プロパティページを参照してください。

構文

css

/* キーワード値 */
corner-top-right-shape: scoop;
corner-top-right-shape: square;

/* superellipse() 関数値 */
corner-top-right-shape: superellipse(2.2);
corner-top-right-shape: superellipse(-2.5);

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

値

corner-top-right-shape プロパティは <corner-shape-value> 値で指定します。

公式定義

DB に値が見つかりません！

形式文法

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

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

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

例

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

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

HTML

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

html

<div></div>

CSS

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

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

css

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

結果

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

仕様書

Specification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-right-shape

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2026年1月14日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content