モードの変更

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

Advent Calendar
CSS

2021 年 10 月 5 日追記）
最近のアップデートによって Firefox, Chrome, Edge では「outline プロパティで作った枠線も角丸にできる」ようになった。

お察しの通り 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 は値の４つ目に 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 でなかったことにして生きていく僕たちなのであった。

outlineプロパティはクライアントの要望で消すことはしばしばあるのだけど、:focusのスタイルを何も用意しないというわけではないです。

このエントリは半年近く前に下書きをしたもので、某氏が企画した「CSS で出来そうで出来ないことシリーズ」への寄稿として準備していたものだった。話が一向に動かない感じだったので、もう自分で素の記事にしてしまうことにした。しかしただあげるのもつまらないなぁと思って、Adventar を見ていたらちょうどCSS Property Advent Calendar 2013が 1 日空いていた。ということで、このエントリは CSS Property Advent Calendar 2013 の 20 日目として書きました。

完走おめでとう！