【CSS】clip-pathのpolygon()を角丸にする方法

はじめに

clip-path: polygon() で多角形のクリップはできるけど、角を丸くしたいと思ったことはないでしょうか？

これまでは border-radius が効かないため、ベジェ曲線を手動で計算するか、SVG の path() を使って書くしかありませんでした。

しかし、Chrome 150 から polygon() に 角丸を指定できるようになり、角丸のサイズ値を指定するだけで角を丸めることができるようになりました！！

これまでの課題

clip-path: polygon() で角丸な多角形を作ろうとすると、以下の問題がありました。

• border-radius は clip-path と併用しても効かない
• ベジェ曲線の制御点を手動で計算する必要があり、非常に複雑
• path() で SVG 構文を書く方法もあるが、可読性が低く保守が辛い

polygon() の round パラメータは、これらの課題を一行で解決します。

基本的な使い方

構文

polygon(<fill-rule>? [round <length>]?, [x y, x y, ...])

round <length> を追加するだけで、すべての頂点が指定した半径で丸まります。

角丸なし（従来の書き方）

.shape {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

角丸あり（round を追加）

.shape {
  clip-path: polygon(round 20px, 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

round 20px を先頭に追加するだけ。座標はそのまま使えます。

活用例

以下のサンプルは、Chrome 150 以降のバージョンで確認してください 🙏（2026年6月13日時点）

See the Pen given-name by degudegu2510 | Qiita (@degudegu2510) on CodePen.

角丸バナー・タグ形状

.tag {
  clip-path: polygon(round 8px, 0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}

吹き出し

.balloon {
  clip-path: polygon(round 12px, 0% 0%, 100% 0%, 100% 75%, 60% 75%, 50% 100%, 40% 75%, 0% 75%);
}

斜め切り抜き（角丸つき）

.hero {
  clip-path: polygon(round 16px, 0% 0%, 100% 0%, 100% 80%, 0% 100%);
}

fill-rule と組み合わせる

fill-rule も引き続き使えます。

.shape {
  clip-path: polygon(evenodd round 10px, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

shape-outside でも使える

clip-path だけでなく、テキストの回り込みを制御する shape-outside でも同様に使えます。

.float-shape {
  float: left;
  shape-outside: polygon(round 20px, 0% 0%, 100% 50%, 0% 100%);
  width: 200px;
  height: 300px;
}

ブラウザサポート

2026年6月現在、Chrome 150 でリリースされました。他のブラウザは対応待ちです。

• Chrome 150～: ✅ サポート済み
• Firefox: 🔄 未対応
• Safari: 🔄 未対応

本記事は 2026年6月時点の情報です。ブラウザのサポート状況は随時更新されます。

まとめ

• polygon() はもともと clip-path や shape-outside で多角形を作れる関数
• Chrome 150 から round <length> パラメータが追加された
• 座標はそのまま、先頭に round 20px を追加するだけで全頂点が丸まる
• fill-rule（nonzero / evenodd）との併用も可能
• clip-path と shape-outside の両方で使える

ベジェ曲線の計算や SVG 構文が不要になり、角丸な多角形が手軽に作れるようになりました！

---

参考資料

• Allow optional rounding parameter for polygon() - CSSWG Issue #9843
• Chrome 150 beta - Chrome for Developers
• polygon() - MDN Web Docs

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。