N2
NanToo
AD
デザイン・Web制作

border-radius 形状集（squircle対応）

border-radiusで作れる形状プリセット33種。基本角丸・非対称・squircle（iOS風）・有機的なblob・方向性シェイプまで対応。8値エディタでコーナー別微調整、幅高さでプレビュー確認可能。

プリセット (7)

四角
Square
角丸 (4px)
Rounded SM
角丸 (8px)
Rounded
角丸 (16px)
Rounded LG
角丸 (24px)
Rounded XL
カプセル
Pill
円
Circle

Squircle

Apple風squircleのCSS近似。正方形要素でバランス最良。

220×220
サイズ:
単位:※ % 値はボックスサイズに追従。px は固定半径。

8値エディタ（詳細調整）

水平半径 (horizontal)
左上 (TL)%
右上 (TR)%
右下 (BR)%
左下 (BL)%
垂直半径 (vertical)
左上 (TL)%
右上 (TR)%
右下 (BR)%
左下 (BL)%
CSS（圧縮）
border-radius: 22% 22% 22% 22% / 28% 28% 28% 28%;
CSS（展開）
border-top-left-radius: 22% 28%;
border-top-right-radius: 22% 28%;
border-bottom-right-radius: 22% 28%;
border-bottom-left-radius: 22% 28%;

注: CSS単体では真のsquircle（superellipse）は表現できません。 ここでのsquircleプリセットは elliptical radius による近似です。ピクセルパーフェクトなsquircleが必要な場合は SVG / Canvas を使用してください。

AD
このツールについて問い合わせる →

border-radius 形状集（squircle対応）について

border-radiusでできること

border-radiusは要素の角を丸めるCSSプロパティですが、単なる「角丸ボタン」以外にも驚くほど多彩な形状を表現できます。8つの値（4つのコーナー × 水平/垂直）を個別に指定することで、ひし形・squircle・blob（有機的な形）・チャット吹き出しまで作成可能です。

本ツールは33種類のborder-radius形状を基本・非対称・squircle・有機的・方向性の5カテゴリで提供します。すべてコピペで即利用でき、8値エディタで微調整も可能です。

border-radiusの8値構文

border-radiusは内部的に8つの値を持ちます。スラッシュ「/」の前が水平半径、後ろが垂直半径です。

border-radius:
  30% 70% 70% 30%   /* 水平: TL TR BR BL */
  /
  30% 30% 70% 70%;  /* 垂直: TL TR BR BL */

この記法により、丸みの縦横比をコーナーごとに変えられます。単純な半径指定（border-radius: 20px;）では作れない、有機的な形が実現可能です。

squircleについて

Squircle（スクワークル）は、正方形と円の中間の形で、iPhoneのアプリアイコンなどで使われる滑らかな角丸です。数学的には「スーパー楕円」の一種で、CSSのborder-radiusだけでは完全再現できません。

しかし、8値border-radiusを工夫することで、視覚的に非常に近い近似は可能です。本ツールのsquircleカテゴリには、Apple風・強調風など複数のアプローチを用意しています。

ピクセル完璧なsquircleが必要な場合は、SVGパス、Canvas、またはfigma-squircleのようなライブラリを検討してください。本ツール出力のCSS squircleは、Web UIの日常的な用途では十分実用的な品質です。

形状カテゴリと代表的な使用例

カテゴリ用途代表プリセット
基本汎用UIrounded-sm/md/lg/xl、pill、circle
非対称吹き出し、カード装飾top-rounded、diagonal、chat-bubble
squircleiOS風アイコン、ロゴsquircle-sm/md/lg、super-ellipse
有機的ヒーロー背景、装飾blob 1-4、egg、leaf、petal
方向性タグ、バッジtag、arrow-box、stamp、ticket

よくある質問

Q. %指定とpx指定、どちらを使うべき？
固定サイズのコンポーネント（ボタン、タグ）にはpx指定が安定します。レスポンシブな要素や、要素サイズに比例して丸みを変えたい場合は%指定が便利です。特にpill（カプセル）形状には border-radius: 9999px (またはborder-radius: 50vh) が定番で、要素高さに関わらずカプセル型を保ちます。
Q. blob形状がレスポンシブで崩れます
%指定のborder-radiusは要素の縦横比に依存するため、アスペクト比が大きく変わると形が崩れます。aspect-ratioプロパティで要素の縦横比を固定する（例: aspect-ratio: 1 / 1;）か、固定サイズにするのが確実です。本ツールのプレビューではサイズ変更ボタンで各種比率を確認できます。
Q. border-radiusでチケットのノッチ（両端の切り抜き）は作れますか？
真のノッチ（凹み）はborder-radius単独では不可能で、radial-gradientやmask、::before/::after擬似要素との組み合わせが必要です。本ツールのticketプリセットは、視覚的に近い近似を提供します。完全なチケット型は clip-path generator の専用プリセットを検討してください。
Q. 角丸の内側と外側が合いません
子要素がborder-radiusで切り取られない問題は、親に<code>overflow: hidden;</code>を付けることで解決します。ただし内側の角丸（子要素を親より小さな角丸で表示）は別途子要素側で設定が必要です。「内側の角丸 = 外側の角丸 - border幅」が美しい比率です。
Q. Tailwind CSSと組み合わせるには？
Tailwindの標準クラス（rounded-sm/md/lg/xl/full）で表現できない形状は、arbitrary values記法で直接CSS値を指定できます。例: <code>class="rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]"</code>。ただし複雑なborder-radiusはCSS変数やglobal CSSで管理するほうがメンテナンス性が高いです。
このツールを評価
4.0(1件)