【公式】Pockit Chrome拡張機能が登場

検索の手間を省略。ブラウザのツールバーから1秒でツールを起動。

Chromeに追加 (無料)

プライバシー完全保証

すべての処理はブラウザ内で完結します。データが外部サーバーへ送信されることはありません。

CSSボーダー半径

角丸デザインを自由にコントロール。8つの値を調整してユニークな形状を作り、CSSをコピーして貼り付けるだけです。

Shape Presets

CSS Code
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;

Shape Settings

Vertical Axis

無料CSSボーダー半径ジェネレーター - ユニークな形状を作成

視覧的なCSS border-radiusジェネレーターでユニークな角丸と有機的なブロブ形状をデザインしましょう。4つまたは8つのコントロールポイントを調整して非対称の曲線、ボタン、装飾要素を作成。リアルタイムで形状をプレビューし、CSSコードを即座にコピー。クリエイティブなインスピレーションのためのランダム形状生成。UIコンポーネント、プロフィールフレーム、モダンウェブデザインに最適。

1こんな時に使えます

💡有機的な形状のプロフィール画像フレームを作成
💡ユニークな背景装飾要素のデザイン
💡柔らかい印象のUIコンポーネント作成

2特徴

  • 4方向および8方向(フルコントロール)調整サポート
  • リアルタイム形状プレビュー
  • ランダム形状生成
  • 簡単なCSSコードコピー

3使い方

  • 各コーナーのハンドルをドラッグして曲率を調整します。
  • 「フルコントロール」を有効にすると8つの値を個別に調整できます。
  • 希望の形ができたらCSSコードをコピーします。
  • 「ランダム」ボタンで新しい形を探索できます。

よくある質問

Q. 8つの値は何を意味しますか?

A. 各コーナーの水平および垂直半径を個別に定義し、非対称な曲線を作成します。

Q. 古いブラウザと互換性はありますか?

A. ほとんどのモダンブラウザはサポートしていますが、非常に古いバージョンでは4つの値しか適用されない場合があります。