OneKitTools logoOneKitTools
開発者に戻る

CSS Border Radiusジェネレーター

コーナー制御、リンクモード、プリセット、CSS出力付きのビジュアルborder-radiusエディター

CSS Border Radiusジェネレーター について

ビジュアルエディターでCSS border-radius値をデザインします。各コーナーを独立して調整し、プリセットを使用してCSSをコピーできます。

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

  1. 1コーナーのスライダーをドラッグするか、各コーナーの正確な値を入力します。
  2. 2「すべてのコーナーをリンク」を切り替えて、すべてのコーナーを同時に調整します。
  3. 3正確な制御のために単位（pxまたは%）を選択します。
  4. 4ピル、円、ブロブなどのプリセットで即座に形状を作成できます。
  5. 5CSS出力をコピーしてスタイルシートに貼り付けます。

ヒント

  • パーセンテージベースの値（50%）は、サイズに関係なく正方形の要素に完璧な円を作成します。
  • ブロブプリセットは高度な8値border-radiusを使用して、有機的で非対称な形状を作ります。
  • カードやボタンにわずかなborder-radius（4-8px）を使用すると、丸すぎずにモダンな印象になります。

関連ツール

OneKitTools チーム更新日 2.21.4