CSSで枠線を引くためには主に border プロパティが使われるが、その外側に枠線を引ける outline プロパティもある。どちらも枠線には違いないのだが、MDNでは border を境界線、outline を輪郭線と訳していた。outline プロパティは、(input要素とかに)フォーカスがあるときにブラウザがデフォルトで引く線を変えたいときくらいにしか使わない気がする。ただ、borderで引いた線のサイズは「その要素の占有領域」に含まれるのに対して、outlineで引いた線のサイズは占有領域に含まれない違いがあるので、(既に作り込まれた後のWeb内で)動的に枠を見せたくなったときにはoutlineの方が便利な場合もありそうな気がする。borderが0のところに、動的にborderを描いてしまうと、周囲にある要素の配置が（borderで加えたピクセル数ほど）ずれてしまうので、あらかじめ透明の（または背景色等と同じ色の）borderを引いておくような工夫が要る。しかし、outlineの場合は周囲の配置に影響しないので、そのような配慮が要らない。それ以外の用途では、ある要素に対して2つの枠線を引きたいときとかだろうか。なお、borderは要素の外側にぴったりくっついた枠線にしかならないが、outlineの場合は outline-offset プロパティを併用することで「少し離れた位置」に枠線を引くこともできる。そういう線を引きたい場合にも使える。（※IEは除く。が、IEはもうどうでも良いだろう。）

で、ここからが本題なのだが、borderとは異なって、outlineで引いた枠線は角丸にできない……と長年思っていた。2021年には、Firefox、Chrome、Edgeではoutlineも角丸にできるようになったが、Safariでは角丸にできないままだった。……のだが、今年の3月にリリースされた Safari 16.4 で outlineの角丸をサポートするようになったと知った。これでようやく、border-radius プロパティで角丸にしている要素にoutlineで線を引いても、ちゃんとそのborder-radiusの値に従って線が引かれることを前提にしても良くなりそうだ。まだ今は Safari 16.4 未満のユーザがそれなりに居るだろうから、仕事のサイトで使うわけにはいかない可能性はあるが。

……と思ったのだが、Safari 16.4の公式リリースには確かに、Now in Safari 16.4, outline always follows the curve of border-radius.と書かれているのだが、Can I UseでCSS property: outline項目でSafariの欄を見ると、注釈にoutline does not follow the shape of border-radius. See bug 20807 .のように書かれていた。公式でサポートはされたが、まだ何か描画上の不具合はあるのか……。outlineに対する装飾の有無によって、角丸にできたりできなかったりするっぽい？