ビジュアルで直感的にCSS border-radiusを設計できるツールです。シンプルな角丸からピル・円・ブロブ・有機的なシェイプまで、プリセットとスライダーで自由に生成。CSSコードをワンクリックでコピーできます。

プリセット

プレビュー

コントロール

全コーナーが同時に変わります
H
H
H
H

生成されたCSS

border-radius: 0;

経理・会計をもっとスマートに

freee会計なら、請求書・確定申告・経費精算をまとめて自動化。エンジニアやフリーランスにも選ばれています。

freeeを無料で試す

使い方

  1. プリセットを選んでシェイプのベースを決める。または、スライダーをゼロから調整する。
  2. px / % を切り替え — パーセントは要素サイズに対する相対値、ピクセルは絶対値。
  3. コーナー連動をオフにすると、各コーナーを独立して設定可能。
  4. 楕円チェックを入れると水平・垂直の半径を個別指定でき、有機的なフォルムに。
  5. プレビューサイズを変えてアスペクト比が変わったときの見た目を確認。
  6. CSSをコピーしてスタイルシートに直接貼り付け。

早見表: border-radius の書き方

値意味
border-radius: 8px全角が同一
border-radius: 8px 16pxTL+BR / TR+BL
border-radius: 8px 16px 24px 32pxTL TR BR BL（時計回り）
border-radius: 40% 60% / 60% 40%楕円（水平 / 垂直）

関連ツール

ボックスシャドウを生成 → CSS Box Shadow ジェネレーター グラデーションを作成 → CSS グラデーションジェネレーター Flexboxレイアウトを構築 → CSS Flexbox ジェネレーター