Border Radiusジェネレーター
直感的な操作で美しい角丸デザインを簡単に作成できます。
px
px
px
px
px
💡スライダーまたはプレビューの4つの頂点を直接操作できます
%
%
%
%
border-radius: 12px 12px 12px 12px;
Border Radiusジェネレーターとは?
Border Radiusジェネレーターは、Webデザインにおける角丸デザインを簡単に作成できるツールです。CSSのborder-radius
プロパティの値を視覚的に生成し、直感的に操作でき、すぐにコードをコピーして使用できます。デザインワークフローを効率化し、洗練された角丸デザインをすばやく実現します。
主な機能
- 視覚的プレビュー: リアルタイムに変化するプレビューで結果をすぐに確認
- 2つのモード: シンプルな角丸と複雑な形状を作成できるアドバンスドモード
- 直感的な操作: スライダーやドラッグ操作による簡単調整
- コードコピー機能: 生成されたCSS値をワンクリックでコピー
- アウトライン表示: デザインの確認がしやすいアウトライン表示オプション
Border Radiusジェネレーターの使い方
Border Radiusジェネレーターは、「シンプル」と「アドバンスド」の2つのモードを提供しています。それぞれのモードで角丸デザインを簡単に作成できます。
シンプルモード
シンプルモードでは、ボックスの四隅の角丸を個別に調整するか、「全て」のスライダーで一括設定できます。
- 「シンプル」タブを選択
- 「全て」のスライダーを動かすと、四隅すべてに同じ値が適用されます
- または「左上」「右上」「右下」「左下」の各スライダーを個別に調整
- リアルタイムプレビューで結果を確認
- 生成されたCSSコードをコピーボタンでコピー
アドバンスドモード
アドバンスドモードでは、複雑な曲線形状を作成できます。非対称なデザインや創造的な形状に最適です。
- 「アドバンスド」タブを選択
- 「上辺」「右辺」「下辺」「左辺」のスライダーを調整
- または、プレビュー上の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解説を参照してください。