outlineプロパティで作った枠線は角丸にすることができない

表題の通り、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日目として書きました。

完走おめでとう！