メインコンテンツにスキップ

CSS Border Radiusジェネレーター

CSS border-radiusを視覚的に作成し、コードをコピーできる無料オンラインツールです。

Preview

モード

丸み

px

CSSコード

border-radius: 20px;

プリセット

主な機能​

  • 2つのモード: 全体モード、個別コーナーモード
  • リアルタイムプレビュー: 変更を即座に確認
  • 細かい調整: 0-200pxの範囲
  • 9つのプリセット: よく使用される角丸スタイル
  • ワンクリックコピー: CSSコードを即座にコピー

Border Radiusとは？​

border-radiusは要素の角を丸くするCSSプロパティです。

基本構文​

/* すべての角が同じ */
border-radius: 10px;

/* 各角を個別指定 */
border-radius: 10px 20px 30px 40px;
/* 順序: 左上、右上、右下、左下 */

プリセットスタイル​

Square (四角)​

border-radius: 0px;

鋭い角、クラシックなデザイン

Slightly Rounded (わずかに丸い)​

border-radius: 4px;

微妙な丸み、洗練された印象

Rounded (丸い)​

border-radius: 8px;

適度な丸み、最も汎用的

Very Rounded (とても丸い)​

border-radius: 16px;

柔らかい印象、親しみやすいデザイン

Pill (ピル型)​

border-radius: 50px;

ボタンやタグに最適

Circle (円)​

border-radius: 9999px; /* または50% */

プロフィール画像、アイコン

Top Only (上部のみ)​

border-radius: 12px 12px 0 0;

モーダルヘッダー、カード上部

Bottom Only (下部のみ)​

border-radius: 0 0 12px 12px;

モーダルフッター、ドロップダウン

Blob (ブロブ)​

border-radius: 30px 60px 30px 60px;

有機的な形、ユニークなデザイン

ブラウザ互換性​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ すべてのモバイルブラウザ

関連ツール​