border-radiusの仕組み
border-radiusプロパティは、要素の角を丸めます。長さやパーセンテージの単位を使用して、左上、右上、右下、左下の順に値を指定できます。
ジェネレーターの使い方
各コーナーに数値やパーセンテージを入力すると、ツールが対応するCSSルールを出力します。プレビューはリアルタイムで更新されるため、コードをコピーする前に要素がどのように見えるかを正確に確認できます。
高度な楕円の角
円の代わりに楕円を作成するには、スラッシュ構文を使用します。border-radius: 50% / 50%。最初の値のセットは水平方向の半径を制御し、2番目のセットは垂直方向の半径を制御するため、各コーナーを独立して整形できます。
ブラウザのサポート
Chrome、Firefox、Safari、Edge、Operaを含むすべての主要なブラウザがborder-radiusプロパティをサポートしています。現在のバージョンではベンダープレフィックスは不要です。
その他のCSSジェネレーター
角丸とCSS text-shadowジェネレーターを組み合わせて、見出しやボタンに奥行きを持たせましょう。