CSS角丸生成

境界線の半径設定

すべてのコーナー:20px

プリセット

境界線の半径のプレビュー

.element {
  border-radius: 20px;
}

関連： CSSシャドウ生成, CSSプレフィックス追加, グラデーション生成, コード整形/圧縮, 色変換, 画像切り抜き

? よくある質問

border-radius は要素の角を丸めます。値はピクセル、パーセンテージ、または em で指定できます。すべての角を一度に指定することも（border-radius: 10px）、各角を個別に指定することもできます（左上、右上、右下、左下）。

はい！スラッシュで区切られた2つの値を使用してください：border-radius: 50px / 25px。最初の値は水平方向の半径、2番目の値は垂直方向の半径で、円ではなく楕円の曲線を作成します。

正方形の要素には border-radius: 50% を設定します。パーセンテージは要素の寸法に対する相対値なので、正方形で 50% を指定すると円が作成されます。長方形の場合は、代わりに大きなピクセル値を使用してください。

もちろんです！各コーナーに異なる値を指定できます：border-radius: 10px 20px 30px 40px（左上、右上、右下、左下）、またはborder-top-left-radiusなどの個別のプロパティを使用します。

はい、border-radius はボーダーとパディングと相互作用します。外側のエッジはボーダーに沿って移動し、内側のエッジはパディングに合わせて調整されます。ビジュアルプレビューで、これらのプロパティがどのように組み合わされるかを確認できます。

はい、もちろんです！このツールはブラウザ内で完全に動作します。データ処理はすべてデバイス上でローカルに行われ、サーバーにアップロードされることはありません。ファイルやデータはコンピューターから外部に漏れることがないため、完全なプライバシーとセキュリティが確保されます。