ボーダーラジウス生成

各コーナーのradius値をスライダーで調整。CSSをコピー。

Border Radius Generator

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

関連ツール

ボーダーラジウス生成主な使い方・用途

  • カードUIの角丸設定
  • ボタンの角丸デザイン
  • アバター画像の円形表示
  • フォーム要素のスタイリング
  • Figmaデザインのコード化

使い方(ステップ別)

  1. 1
    スライダーを調整する各コーナーのborder-radius値をスライダーで設定します。
  2. 2
    単位を選ぶpx または % を選択できます。
  3. 3
    CSSをコピーする生成されたborder-radiusのCSSをコピーします。

このツールの特徴

  • 4コーナーの個別スライダー
  • pxと%の単位切替
  • 全コーナー連動オプション
  • リアルタイムプレビュー

このツールについて

各コーナーのradius値をスライダーで調整。CSSをコピー。