カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
CSS 角丸ジェネレーター
四隅の半径を連動・個別に調整し、楕円の角丸もプレビューして border-radius を出力します。
楕円の角丸
プレビュー
CSS
このツールについて
ボタンやカードの形を決める際に、円形と楕円形の角を比較できます。
使い方
px または % を選び、スライダーか数値で四隅の半径を調整します。初期状態は連動しており、解除すると個別に編集できます。楕円の設定で縦方向の半径を独立させると、横と縦の曲がり方を別々に指定できます。
範囲は 0～500 px または 0～100%。プレビューと同じ border-radius 宣言をコピー・保存できます。パーセント指定の見え方は実際の要素サイズによって変わります。単位の切り替えは数値の解釈を変えるもので、見た目の大きさを維持する換算ではありません。
よくある質問
border-radius のスラッシュは何ですか？
前が水平方向、後ろが垂直方向の半径です。角が重なる場合、CSS は比率を保って半径を縮め、ボックスに収めます。
50% にすると円ではなく楕円になるのはなぜですか？
割合の半径は要素の幅と高さをそれぞれ基準にします。長方形で 50% にすれば楕円になり、円にするには幅と高さを揃える必要があります。角の大きさを固定したい場合は px を使い、実際の要素サイズで確認してください。
関連ツール
新しいタブで開きます
コメント
0