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

Webデザインにおける角丸デザインを簡単に作成できるツールです。CSSのborder-radiusプロパティの値を視覚的に生成でき、直感的に操作してすぐにコードをコピーできます。

シンプルな角丸から複雑な形状まで、デザインワークフローを効率化します。

使い方

2つのモードで角丸デザインを作成できます。

シンプルモード

四隅の角丸を個別に調整するか、「全て」のスライダーで一括設定できます。

1. 「シンプル」タブを選択
2. スライダーで値を調整
3. リアルタイムプレビューで確認
4. 生成されたCSSコードをコピー

アドバンスドモード

複雑な曲線形状を作成できます。非対称なデザインや創造的な形状に最適です。

1. 「アドバンスド」タブを選択
2. スライダーで調整、またはプレビュー上の頂点（○）を直接ドラッグ
3. リアルタイムプレビューで確認
4. 生成されたCSSコードをコピー

追加オプション

「アウトライン」オプションをオンにすると、破線のアウトラインで形状を明確に確認できます。

活用シーン

• ボタンデザイン：押しやすく見た目も良いボタン用の角丸
• カードレイアウト：情報カードやコンテナに適切な角丸
• 画像フレーム：写真や画像の角を丸めてソフトな印象を演出
• モーダルウィンドウ：ポップアップやダイアログに適した角丸
• 創造的なデザイン：非対称の形状や波形のような複雑なデザイン

CSSのborder-radiusについて

border-radiusプロパティは、要素の角を丸くするためのCSSプロパティです。単純な角丸から複雑な形状まで、さまざまなデザインを実現できます。

/* 基本的な使い方（四隅同じ値） */
border-radius: 10px;

/* 四隅別々の値（左上、右上、右下、左下） */
border-radius: 10px 20px 30px 40px;

/* 複雑な形状（水平半径 / 垂直半径） */
border-radius: 10% 30% 50% 70% / 40% 60% 80% 20%;

より詳細な情報は、MDN Web Docsのborder-radius解説を参照してください。