outlineプロパティで作った枠線は角丸にすることができない
- 公開日
- タギング
- Advent Calendar
- CSS
2021 年 10 月 5 日追記）
最近のアップデートで Firefox と Chrome と Edge では「outline プロパティで作った枠線も角丸にすることができる」ようになった。
- Mozilla Firefox v88（2021 年 4 月 19 日リリース）
- Google Chrome v94（2021 年 9 月 21 日リリース | commit）
- Microsoft Edge v94（2021 年 9 月 21 日リリース）
お察しの通り IE11 はもちろん、Safari は 2021 年 10 月 5 日時点の最新版の v15 でもまだ対応していない。
（追記ここまで
表題の通り、outlineプロパティで作った枠線は角丸にすることができない。すなわち、border-radiusで角丸に変形させたボックスにoutlineを指定すると、角丸でなく角を持ったまま枠線がつくということだ。
JSFiddle でborder-radiusとoutlineを両方指定したデモを作った。黒線がborderで水色線がoutline。見ればすぐわかる。
border-radiusの外側にも角丸の枠を作りたいなら、スプレッドを持つbox-shadowで実現できる。
<div class="box radius boxShadow"></div>
.box {
border: 10px solid black;
width: 150px;
height: 150px;
background-color: gold;
}
.radius {
border-radius: 50px;
}
.boxShadow {
box-shadow: 0 0 0 10px tomato;
}
box-shadowは 4 つ目に spread distance と呼ばれる値を<length>型で指定することができ、これにより影を拡幅できる。影のつき方はborder-radiusの形状に従うので、上記コードのように x,y の offset と blur を 0 にして spread distance を指定すれば「border の外側に角丸の枠」ができあがる。
outline にしかできないこともある…わけではなかった
outline-offsetというプロパティがある。outlineと併せてこれを指定すると、ボックスとoulineの間に空白を作ることができる。ただし IE は最新版（2015/11/30 時点で IE11）でも対応していない。
.outline {
outline: 10px solid skyblue;
outline-offset: 10px;
}
box-shadowでは border と自身の間に隙間をつくることはできないので、こういうのはoutline-offsetしかないかなぁと一瞬思ったけど、擬似要素で完璧に代替できた。また TRBL か。
outline-offsetは負の値も指定できるのでこういう表現も可能だけど、2015/7/7 時点の CR 版だと負の値の指定は at-risk であり、今後どうなるかわからない。
ついでに、outline-offsetはアニメーション可能ということなのでこういうデモを作ってみた。Google Chrome 46 では意図通りに動いたけど Firefox 42 ではちょっと使い物にならない挙動だった。IE もoutline-offsetには未対応だし、このプロパティに頼って凝った表現をするのは現実的に不可能という感じだ。
そして要素に対してマイナスの offset もアニメーションも擬似要素なら IE11 でも Firefox でも余裕で動く。
今日もoutlineプロパティは reset.css でなかったことにして生きていく僕たちなのであった。
このエントリは半年近く前に下書きをしたもので、某氏が企画した「CSS で出来そうで出来ないことシリーズ」への寄稿として準備していたものだった。話が一向に動かない感じだったので、もう自分で素の記事にしてしまうことにした。しかしただあげるのもつまらないなぁと思って、Adventar を見ていたらちょうどCSS Property Advent Calendar 2013が 1 日空いていた。ということで、このエントリは CSS Property Advent Calendar 2013 の 20 日目として書きました。
完走おめでとう！