CSS - corner-shape

概要

属性名	corner-shape, corner-top-shape, corner-right-shape, corner-bottom-shape, corner-left-shape, corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape, corner-inline-end-shape corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
値	corner-shape: <corner-shape-value>{1,4} corner-{top,right,bottom,left}-shape: <corner-shape-value>{1,2} corner-{block,inline}-{start,end}-shape: <corner-shape-value>{1,2} corner-{top,bottom}-{right,left}-shape: <corner-shape-value> corner-{start,end}-{start,end}-shape: <corner-shape-value>
値の詳細	<corner-shape-value> = round \| scoop \| bevel \| notch \| square \| squircle \| <superellipse()>
初期値	round
適用可能要素	border-radius を適用可能な要素
継承	継承しない
サポート	https://caniuse.com/?search=corner-shape

矩形の角に border-radius だけでは表現できない形状を指定します。

round

squircle

square

bevel

scoop

notch

superellipse()

round: border-radius の規定値です。従来通りの円弧または楕円弧を描画します。
squircle: square と circle を組み合わせた用語です。直角と円弧の中間の形状とします。
square: 直角とします。border-radius を打ち消します。
bevel: ベベル角と呼ばれる、角を斜形に切り取った形状とします。
scoop: スコップの意味です。角をスコップですくい取った様な形状とします。
notch: ノッチは切り目を意味します。角を直角に切り取った形状とします。
superellipse(n): 角の丸め具合を指定します。n=Infinite は square、n=1 は round、n=0 は bevel、n=-1 は scoop、n=-Infinite は notch と同じ形状となります。

CSS

.my-corner-shape-example {
  width: 200px;
  height: 100px;
  border: 3px solid #c66;
  border-radius: 30px;
  corner-shape: scoop;
}

HTML

<div class="my-corner-shape-example"></div>

表示

初版：2025年8月10日、最終更新：2025年8月10日

https://www.tohoho-web.com/css/prop/corner-shape.htm