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

公開日: 2015-11-30
タグ: Advent Calendar; CSS

追記（2021 年 10 月 5 日、2023 年 1 月 3 日、2023 年 3 月 28 日）
最近のアップデートでモダンブラウザ全てで「outline プロパティで作った枠線も角丸にできる」ようになった。

Mozilla Firefox v88（2021 年 4 月 19 日リリース）
Google Chrome v94（2021 年 9 月 21 日リリース | commit）
Microsoft Edge v94（2021 年 9 月 21 日リリース）
Safari v16.4（2023 年 3 月 27 日リリース）

なお、IE11 は対応しないまま役目を終えている。

時間がかかったが Safari が対応したのはめでたい。これで outline を丸めるために box-shadow で代用するテクニックはもう必要なくなった。やったね！（追記ここまで）。

表題の通り、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: 80px;
  height: 80px;
  background-color: gold;
}

.radius {
  border-radius: 25px;
}

.boxShadow {
  box-shadow: 0 0 0 10px tomato;
}

box-shadow は値の４つ目に spread distance length を指定すると影を拡幅できる。影のつき方は border-radius の形状に従うので、上記コードのように x,y の offset と blur を 0 にして spread distance を指定すれば「border の外側に角丸の枠」ができあがる。

outline-offset

表題とは直接関係はないが、outline-offset というプロパティがある。outline と併せてこれを指定するとボックスと outline の間に隙間を作ることができる。

<div class="box radius outline offset"></div>

.offset {
  outline-offset: 5px;
}

この表現は box-shadow ではできないが、どうしてもやりたい場合は疑似要素を使えば良いだろう。

<div class="box radius pseudo"></div>

.pseudo {
  position: relative;
}
.pseudo::after {
  content: "";
  position: absolute;
  top: -25px;
  right: -25px;
  bottom: -25px;
  left: -25px;
  border: 10px solid blueviolet;
  border-radius: 40px;
}

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

完走おめでとう！