CSS border-radiusジェネレーター
複雑なCSSのborder-radius値を視覚的に作成します。各コーナーを個別にコントロールできます。
border-radius: 20px 20px 20px 20px;
このツールの使い方
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
CSS border-radiusジェネレーターとは何ですか？
CSSのborder-radiusプロパティは、最大4つの値を受け付け、左上、右上、右下、左下の順に各コーナーへ1つずつ指定します。異なる半径を組み合わせることで、有機的なしずく型、左右非対称のカード、吹き出し風のスタイルなどを作れます。このツールでは、スライダーで各コーナーを調整し、結果をリアルタイムで確認できます。
よくある活用例
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
よくある質問
楕円形の半径はどうですか？▼
関連ツール
カラー変換ツール（HEX/RGB/HSL）
色をHEX、RGB、HSLの各形式間で変換します。視覚的に色を選ぶことも、値を手動で入力することもできます。
CSS box-shadowジェネレーター
CSSのbox-shadow値を視覚的に作成します。リアルタイムでプレビューし、生成されたCSSをコピーできます。
CSSグラデーションジェネレーター
線形および放射状のCSSグラデーションを作成します。視覚的に色を選び、生成されたCSSをコピーできます。
cubic-bezierイージングカーブジェネレーター
CSS用のcubic-bezierイージングカーブを作成します。標準のプリセットも含まれています。
カラーパレットジェネレーター
任意のベースカラーから調和のとれたカラーパレットを生成します。補色、類似色、トライアド、モノクロマティックの各配色に対応しています。
CSS clamp()ジェネレーター
clamp()を使って、流動的でレスポンシブなCSSの値を生成します。ビューポートの範囲全体にわたり、最小サイズと最大サイズの間をなめらかにスケーリングします。