オンラインで角丸を追加

丸みをファイル自体に焼き込む必要があるとき

CSSのborder-radiusは、実際のWebページ上で角丸を表示する分にはうまく機能しますが、ブラウザによるレンダリングを前提にできない状況は数多くあります。メールクライアントはborder-radiusを無視したり除去したりするのが常なので、マーケティングメールに載せた商品写真やアバターは、ファイル自体がすでに透明な角を持っていない限り丸く見えません。同じ制約はPDF、画像をそのまま表示するネイティブアプリのビュー、スライド資料、そしてサイト独自のスタイルシートを適用せずにアップロードされた素材をそのまま描画するSNSプラットフォームでも起こります。 アプリアイコンやファビコンの作業も繰り返し出てくるケースです。プラットフォームによっては正方形のPNGを自動的にマスクしてくれるものもありますが、プレビュー素材、アイコンのマーケティング用スクリーンショット、独自のマスクを適用しない画面などでは、元の画像自体を自分で丸めておくことで、ユーザーが実際に目にするマスク済みバージョンと見た目を一致させられます。 アバターやプロフィール画像も同じ理屈です。丸いアバターを、証明書、名札、1枚に統合された画像として書き出されるカードレイアウト、動画のサムネイルなど、より大きな平坦化されたグラフィックに合成する場合、丸みは平坦化される前の元のピクセルにすでに存在している必要があります。元の要素だけにCSSの半径を適用しても、それが静的な書き出しに焼き込まれることはないからです。 処理はすべてブラウザ内で完結するため、サーバーに送りたくない素材にも使えます。個人情報を含むスクリーンショット、未発表の商品写真、社内ツールの画像などです。角を丸くするためにこれらがどこかへ送信されることはありません。