CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。 下記のようにボーダーや背景をボックスからはみ出して配置できます。

[coliss]

h1要素1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。

[soratomo]

親ブロックの幅固定時に便利そう。ただ、ボーダーを線じゃなく背景として使うのは抵抗ありみ。

[ultimatebreak]

はいはいIE…IE!? (IEサポート終了前に知りたかった)

[basseyboost]

今まさに使いたかった！

[eartht]

border-image使ったことなかった。柄をはみ出させたい場合は有効。背景だが意味を持ってる写真なんかはこの方法だと微妙。

[arapro]

border-image、9スライスでしか使ったことなかった。こんなことできるんだ。

[spark7]

border-imageとは... なんでもありだな。

[hatest]

ボーダー（境界）なのに、はみ出すというのはいろいろ矛盾してる気がしないでもない

[makou]

面白そう。

[kuracom]

border-image-outset 知らなかった