Border Radiusジェネレーターとは？

CSS の border-radius を視覚的に調整して、角丸の形とコードを確認できるツールです。シンプルな角丸から、非対称な複雑な形まで作れます。

プレビューを見ながら調整できるので、数値だけではイメージしづらい角丸をその場で確認できます。

使い方

1. シンプルまたはアドバンスドを選びます。
2. スライダーやプレビュー操作で形を調整します。
3. 必要ならアウトラインを表示します。
4. 生成された border-radius のCSSを確認します。

主な設定項目

シンプル

四隅の角丸を個別に調整できます。「全て」を使うと、四隅をまとめて変更できます。

アドバンスド

上辺、左辺、右辺、下辺をもとに、複雑な曲線形状を作れます。プレビュー上の4つの頂点を直接動かして調整することもできます。

アウトライン

破線の外枠を表示して、形の輪郭を確認しやすくするオプションです。

入出力例

シンプルモードで四隅を 12px 24px 36px 48px のように調整すると、次のCSSになります。

border-radius: 12px 24px 36px 48px;

アドバンスドモードでは、次のような % / % 形式の出力になります。

border-radius: 33% 67% 52% 48% / 52% 32% 68% 48%;

活用シーン

• ボタンやカードの角丸を調整したいとき
• 画像枠やバナーに柔らかい形を付けたいとき
• 非対称な装飾や有機的な形を作りたいとき
• CSSコードを確認しながらデザインを詰めたいとき

使うときの注意点

• シンプルとアドバンスドでは出力の形式が異なります
• 複雑な形ほど、レイアウトやサイズによって見え方が変わります
• プレビューで良く見えても、実際の要素サイズでは印象が変わることがあります