border-shapeプロパティにこんな使い方があったとは！ 一つの要素だけ背景色を幅いっぱいに広げるモダンCSSのテクニック
Post on:2026年9月3日
sponsorsr
section要素を積み重ねたときに、一つの要素だけ背景色をブラウザの幅いっぱいに広げるモダンCSSのテクニックを紹介します。
下記は2番目のテキスト要素のとこだけオレンジ色の背景色をブラウザの幅いっぱいに広げたものです。
ちなみに、すべてのsectionに背景色（グレー）を設定するとこんな感じです。設定した要素だけ背景が幅いっぱいになるのが分かると思います。
実際の動作は、デモページでご覧ください。
See the Pen
border-shapeで要素の背景をウインドウいっぱいに by coliss (@coliss)
on CodePen.
HTMLは、シンプルです。
sectionがあり、上から順にh1とp、h2とp、h3とpが内包されています。
オレンジ色の背景色を適用しているのは2番目のsection内のpのみです。
|
1 2 3 4 5 6 7 8 |
<section> <h1>Main title</h1> <p>Dragée powder bear claw tiramisu pudding gummi bears wafer. Macaroon chocolate cake cake marzipan icing carrot cake macaroon sweet. Lemon drops </p> </section> <section> <h2>Secondary title</h2> <p class="breakout-background">Pie pastry macaroon candy tootsie roll jujubes pudding pie. Jelly-o chocolate cake pastry gingerbread brownie danish liquorice chocolate cake. Jelly beans donut cupcake danish croissant liquorice. Cotton candy brownie croissant pie toffee. Cotton candy chocolate cake gummi bears ice cream jelly fruitcake caramels. Shortbread ice cream bear claw gingerbread chocolate cake jelly-o cake caramels soufflé.</p> </section> |
要素の背景色を幅いっぱいに広げるには、border-shapeプロパティを使用します。border-shapeプロパティは、ボーダーに任意の形状（多角形・円など）を設定できます。
このテクニックの仕組みを解説します。
border-shapeプロパティは2つの形状値（外側と内側）を設定できます。そしてボーダーはこれらの形状間の領域として描画されます。外側の形状は幅いっぱいに伸びる長方形で、内側の形状は中心に配置された半径0の円です。内側の形状を何もない状態にすることで、外側の形状が完全に塗りつぶされます。
外側と内側でどのような挙動になっているかは、下記をご覧ください。
|
1 2 3 4 5 6 7 |
.breakout-background { border-shape: inset(0) circle(20%); border-color: #faa307; } .breakout-background:hover { border-shape: inset(0 -100vw) circle(0); } |
See the Pen
border-shapeプロパティの内側と外側の挙動 by coliss (@coliss)
on CodePen.
border-shapeプロパティのサポートブラウザは2026年9月現在、ChromeとEdgeのみです。ほかのブラウザでこのテクニックを使用したい場合は、下記のCSSを記述します。
|
1 2 3 4 |
.breakout-background { border-image: image(#faa307) fill 0//0 100vw; border-image: conic-gradient(#faa307 0 0) fill 0//0 100vw; } |
border-shapeプロパティ非サポートブラウザでもこれで動作します。
下記は、Safari 26.6で表示したものです。
実際の動作は、デモページでご覧ください。
See the Pen
border-shapeプロパティ非サポートブラウザ用 by coliss (@coliss)
on CodePen.
元ネタは、下記ポストより
💡 CSS Tip!
Save this code for the future. It's another way to create that famous breakout effect.
A strange code, right? Learn how it works 👇https://t.co/uB2JkJuBS1
Until better support for border-shape, you will find another way using border-image. pic.twitter.com/t8H7mMzhQT
— CSS by T. Afif (@ChallengesCss) August 5, 2026
sponsors
