corner-bottom-left-shape

Limited availability

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

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

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

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

構文

css

/* キーワード値 */
corner-bottom-left-shape: bevel;
corner-bottom-left-shape: round;

/* superellipse() 関数値 */
corner-bottom-left-shape: superellipse(0.7);
corner-bottom-left-shape: superellipse(-1.9);

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

値

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

公式定義

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

形式文法

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

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

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

例

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

基本的な `corner-bottom-left-shape` の使い方

HTML

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

html

<div></div>

CSS

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

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

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 80px 40% 60px 20%;
  corner-bottom-left-shape: squircle;
}

結果

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

仕様書

Specification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-bottom-left-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