# CSS border-radiusジェネレーター

> CSS border-radiusジェネレーター：各角の丸みを調整してCSSをコピーできます。

CSSのborder-radiusジェネレーターは、手動でコードを書かずにあらゆる要素の角を丸くすることができます。均一な楕円の半径を定義するプロセスを簡略化し、即時のプレビューを提供します。

*Interactive tool: enter your values at https://toollantern.win/ja/css-border-radius-generator/ and results update instantly in your browser.*

## border-radiusの仕組み

border-radiusプロパティは、要素の角を丸めます。長さやパーセンテージの単位を使用して、左上、右上、右下、左下の順に値を指定できます。

## ジェネレーターの使い方

各コーナーに数値やパーセンテージを入力すると、ツールが対応するCSSルールを出力します。プレビューはリアルタイムで更新されるため、コードをコピーする前に要素がどのように見えるかを正確に確認できます。

## 高度な楕円の角

円の代わりに楕円を作成するには、スラッシュ構文を使用します。border-radius: 50% / 50%。最初の値のセットは水平方向の半径を制御し、2番目のセットは垂直方向の半径を制御するため、各コーナーを独立して整形できます。

## ブラウザのサポート

Chrome、Firefox、Safari、Edge、Operaを含むすべての主要なブラウザがborder-radiusプロパティをサポートしています。現在のバージョンではベンダープレフィックスは不要です。

## その他のCSSジェネレーター

角丸と[CSS text-shadowジェネレーター](/ja/css-text-shadow-generator/)を組み合わせて、見出しやボタンに奥行きを持たせましょう。

## よくある質問
### 各コーナーに異なる単位を使用できますか？

はい、各コーナーには独自の長さやパーセンテージの値を設定でき、必要に応じて単位を混ぜることができます。

### パーセンテージの値は何を表しますか？

水平方向の半径については要素の幅、垂直方向の半径については要素の高さを基準に計算されます。

### 古いブラウザにはベンダープレフィックスが必要ですか？

2010年以前にリリースされたブラウザではプレフィックスが必要になる場合がありますが、現在のすべてのブラウザはプレフィックスなしでborder-radiusをレンダリングします。

---
Interactive version: https://toollantern.win/ja/css-border-radius-generator/