corner-end-end-shape
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
corner-end-end-shape は CSS のプロパティで、ボックスのブロック末尾、インライン末尾の角の border-radius 領域における形状を指定します。
全体的な角の形状の解説と複数の例については、corner-shape 一括指定プロパティページを参照してください。
構文
css
/* キーワード値 */
corner-end-end-shape: scoop;
corner-end-end-shape: notch;
/* superellipse() 関数値 */
corner-end-end-shape: superellipse(4);
corner-end-end-shape: superellipse(-0.5);
/* グローバル値 */
corner-end-end-shape: inherit;
corner-end-end-shape: initial;
corner-end-end-shape: revert;
corner-end-end-shape: revert-layer;
corner-end-end-shape: unset;
値
corner-end-end-shape プロパティは <corner-shape-value> 値で指定します。
公式定義
DB に値が見つかりません！形式文法
corner-end-end-shape =
<corner-shape-value>
<corner-shape-value> =
round |
scoop |
bevel |
notch |
square |
squircle |
<superellipse()>
<superellipse()> =
superellipse( <number> |
infinity |
-infinity )
例
その他の関連する例は、corner-shape リファレンスページにあります。
基本的な corner-end-end-shape の使い方
HTML
この例のマークアップには、<div> 要素が 1 つあります。
html
<div></div>
CSS
ボックスにいくつかの基本的なスタイルを設定していますが、簡略化のため省略します。また、box-shadow と、border-radius を 60 ピクセルに、corner-end-end-shape を squircle に適用しています。
css
div {
box-shadow: 1px 1px 3px gray;
border-radius: 60px;
corner-end-end-shape: squircle;
}
結果
表示結果は次のようになります。
仕様書
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-end-end-shape |