角丸（border-radius）生成
Border Radius Generator
角ごとに値を変え、2値記法のスクワークル的な形まで作ってCSSを出力します。
箱の角を丸めます。8つの半径の値をすべて使えますし、「これをスクワークルにしたい」が同じ質問として届くので、`border-radius`では描けない本物の超楕円と`clip-path`の形も合わせて描きます。
プレビュー
CSS
角
左上
右上
右下
左下
プリセット
clip-path
役割の違う別のプロパティです。border-radius は箱の角を丸め、clip-path は任意の形に切り抜いて影も一緒に持っていきます。
使い方
角のスライダーを動かします
4つの角をpxかパーセントで調整します。プレビューと宣言が一緒に更新されます。
塊のような形が要るなら「縦横を同じに」を切ります
そうするとスラッシュの入った8値の書き方になり、角ごとに横方向の半径と縦方向の半径を別々に与えられます。有機的な塊の形はすべてその書き方から出てきます。
四角形でなければclip-pathに切り替えます
円、多角形、吹き出し、山形といったものと、超楕円のスライダーがあります。より丸い四角形ではなく、本物のスクワークル曲線です。
よくある質問
9999pxの半径が50%と同じに見えるのはなぜですか。
一辺で半径どうしが重なってしまうとき、仕様が4つの角すべてを同じ比率で縮めて収めるからです。だからとんでもなく大きい値はどれも同じ形になります。ページはどの比率で縮めたかを表示します。
CSSで本物のスクワークルを描けますか。
`border-radius`では描けません。あの角は厳密に楕円なので、半径に「スクワークルのスライダー」を付けたところで少し丸い四角形にしかなりません。ここの超楕円は`clip-path`のポリゴンとして描いています。いまその曲線を得るための正直な方法です。
clip-pathを使ったら影が消えました。なぜですか。
`clip-path`が要素を切り取るのに対し、影は要素の外側に描かれるからです。はみ出した子要素も一緒に切られます。`border-radius`はどちらもしません。形が角丸の四角形であるかぎり、そちらが正しい道具であり続ける理由です。
まとまりの外側の角だけを丸めるにはどうしますか。
コンテナを丸めて`overflow: hidden`を与えるか、項目に`:first-child`と`:last-child`を使います。まとまり自体に角ごとの半径を与えても子要素には届きません。ボタンのまとまりでたいていそこが崩れます。
ここから渡せます
次の一手
このツールが出したものをそのまま受け取れる道具です。
可変サイズのclamp()計算
Fluid Size Calculator
2つのビューポート幅のあいだでサイズがなめらかに変わるclamp()の式を計算します。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
ボックスシャドウ生成
Box Shadow Generator
複数枚重ねたボックスシャドウとテキストシャドウをプレビューしながら組み立て、CSSを出力します。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。