デザイン・Web制作

border-radius 形状集（squircle近似対応）

border-radiusで作る重複しない形状プリセット33種。基本角丸・非対称・squircle近似・有機的なblob・方向性シェイプを収録。同一単位の8値を0〜100%または0〜9999pxで調整し、サイズ別に確認できます。

登録不要

プリセット (5)

Squircle

楕円角によるsquircleのCSS近似。正方形要素向け。

サイズ:
単位:※ % は水平半径を幅、垂直半径を高さに対して計算します。編集範囲は0〜100%、0〜9999pxです。

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

水平半径 (horizontal)
左上 (TL)
右上 (TR)
右下 (BR)
左下 (BL)
垂直半径 (vertical)
左上 (TL)
右上 (TR)
右下 (BR)
左下 (BL)
CSS（圧縮）
border-radius: 22% / 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 を使用してください。

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

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

border-radiusでできること

border-radiusは要素の角を丸めるCSSプロパティです。4つのコーナーについて水平・垂直の半径を指定することで、基本角丸、楕円状の角丸、blob（有機的な形）、吹き出し風の輪郭などを表現できます。凹形状や矢印の先端はborder-radius単独では作れません。

本ツールは重複しない33種類のプリセットを、基本・非対称・squircle・有機的・方向性の5カテゴリで提供します。8値エディタでは全8値を同じ単位にそろえ、0〜100%または0〜9999pxの範囲で調整できます。

border-radiusの8値構文

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

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

この記法により、丸みの縦横比をコーナーごとに変えられます。CSS仕様では各半径に長さまたは割合を指定できますが、本ツールのエディタは8値を同じ単位で出力します。隣接する半径の合計がボックス寸法を超える場合、ブラウザは重ならないよう使用値を比例縮小します。

squircleについて

Squircle（スクワークル）は、正方形と円の中間として扱われる形状です。数学的なスーパー楕円や各プラットフォーム固有のアイコン曲線を、CSSのborder-radiusだけで同一に再現することはできません。

本ツールのsquircleカテゴリは、水平・垂直半径を変えた楕円角による見た目上の近似です。正確な曲線が必要な場合は、目的の式から作ったSVGパスやCanvas等を使用してください。

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

カテゴリ用途代表プリセット
基本汎用UIrounded-sm、rounded、rounded-lg、pill、circle
非対称吹き出し、カード装飾top-rounded、diagonal-tl-br / diagonal-tr-bl、chat-bubble-left / chat-bubble-right
squircle楕円角による近似形squircle-sm、squircle、squircle-lg、super-ellipse
有機的ヒーロー背景、装飾blob-1〜blob-4、egg、leaf、petal
方向性タグ、バッジtag-left / tag-right、arrow-box、stamp-rounded、ticket

よくある質問

Q. %指定とpx指定、どちらを使うべき？
固定サイズのコンポーネント（ボタン、タグ）にはpx指定が扱いやすく、要素サイズに比例して丸みを変えたい場合は%指定が便利です。カプセル形状には、要素寸法に対して十分大きい同一半径を指定する方法があります。使用値は、角の曲線が重ならないようブラウザが必要に応じて比例縮小します。
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. 角丸の内側と外側が合いません
子要素を親の角丸に沿って切り取りたい場合は、親のoverflowをhiddenまたはclipにする方法があります。子要素自身の角丸は別途指定が必要です。親のborder幅、padding、各軸の半径が異なる場合があるため、単一の引き算だけで常に一致するとは限りません。
Q. Tailwind CSSと組み合わせるには？
Tailwindの標準クラスで表現できない形状は、arbitrary values記法で指定できます。例は class="rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]" です。複雑な値を繰り返す場合は、CSS変数や共通クラスで管理する方法もあります。
このツールを評価
3.3(3件)