Border Radiusジェネレーター

直感的な操作で美しい角丸デザインを簡単に作成できます。

px
px
px
px
px
border-radius: 12px 12px 12px 12px;

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

Border Radiusジェネレーターは、Webデザインにおける角丸デザインを簡単に作成できるツールです。CSSのborder-radiusプロパティの値を視覚的に生成し、直感的に操作でき、すぐにコードをコピーして使用できます。デザインワークフローを効率化し、洗練された角丸デザインをすばやく実現します。

主な機能

  • 視覚的プレビュー: リアルタイムに変化するプレビューで結果をすぐに確認
  • 2つのモード: シンプルな角丸と複雑な形状を作成できるアドバンスドモード
  • 直感的な操作: スライダーやドラッグ操作による簡単調整
  • コードコピー機能: 生成されたCSS値をワンクリックでコピー
  • アウトライン表示: デザインの確認がしやすいアウトライン表示オプション

Border Radiusジェネレーターの使い方

Border Radiusジェネレーターは、「シンプル」と「アドバンスド」の2つのモードを提供しています。それぞれのモードで角丸デザインを簡単に作成できます。

シンプルモード

シンプルモードでは、ボックスの四隅の角丸を個別に調整するか、「全て」のスライダーで一括設定できます。

  1. 「シンプル」タブを選択
  2. 「全て」のスライダーを動かすと、四隅すべてに同じ値が適用されます
  3. または「左上」「右上」「右下」「左下」の各スライダーを個別に調整
  4. リアルタイムプレビューで結果を確認
  5. 生成されたCSSコードをコピーボタンでコピー

アドバンスドモード

アドバンスドモードでは、複雑な曲線形状を作成できます。非対称なデザインや創造的な形状に最適です。

  1. 「アドバンスド」タブを選択
  2. 「上辺」「右辺」「下辺」「左辺」のスライダーを調整
  3. または、プレビュー上の4つの頂点（○）を直接ドラッグして調整
  4. リアルタイムプレビューで結果を確認
  5. 生成された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解説を参照してください。