ボーダーラジウス生成

各コーナーの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をコピー。