borderの角の部分の描画について
CSSのborderプロパティで枠線を描くとき、隣り合う2辺で異なるスタイルを指定すると、角の部分はどのように描画されるでしょうか。
試してみましょう。
See the Pen box-border by snocchy (@snocchy) on CodePen.
恐らく、角の部分は斜めに分割されてそれぞれの枠線が描かれていると思います。
実はCSSの仕様は角の部分の処理を規定しておらず、ブラウザの実装依存となっているようですが、手元のいくつかの環境で確認したところ、いずれも斜めに分割されて表示されました。
4.2. Line Patterns: the border-style properties
Note: This specification does not define how borders of different styles should be joined in the corner.
昔はブラウザによる違いがもっとあったみたいですが、一応統一されてきたのかもしれません。
上記のような実装を前提としたCSSのテクニック（吹き出しの三角形を作る系など）も珍しくないですね。
borderの重なりに優先順位をつける
それでは、もし次のような枠線を付けたいと思ったら、どのようにマークアップすればよいでしょうか。
divを入れ子にしたりすれば出来そうな気はしますが、装飾だけのためにHTMLの構造に手を加えるのは、避けられるに越したことはないですよね。
ということで、疑似要素を使ったマークアップを紹介します。
See the Pen box-border--ordered by snocchy (@snocchy) on CodePen.
::beforeでも::afterでもいいので疑似要素を重ね、はみ出させたい枠線（青いほう）をそちらに付けることで意図どおり表示させることができました。
はみ出させる枠線の長さ（縦線ならheight）が固定値である必要がありますが、参考になれば幸いです。