CSS border-radius生成
CSS border-radiusをライブプレビュー付きで視覚的に生成。各コーナーを個別に調整。楕円形の角丸にも対応。CSSコードをコピー。無料、100%ブラウザで動作。
プレビュー
CSS出力
リファレンス
CSS border-radiusとは？
border-radiusプロパティは要素の角を丸くします。4つのコーナーにそれぞれ異なる値を設定でき、ピクセル、パーセント、その他のCSS単位で指定できます。50%に設定すると要素が円または楕円になります。
構文
1つの値 — border-radius: 10pxで全コーナーに同じ丸みを適用。4つの値 — border-radius: 10px 20px 30px 40pxで左上、右上、右下、左下の順に指定。省略記法 — 2つまたは3つの値で対角コーナーをまとめて指定可能。
楕円形の角丸
楕円形の角丸は水平と垂直で異なる半径を指定して作成します。border-radius: 50px / 25pxのように、スラッシュで区切って水平半径と垂直半径を指定します。これにより非対称な曲線が作成でき、有機的な形状を作るのに便利です。
プライバシー
すべての生成処理はブラウザで100%実行されます。データはサーバーに送信されません。