title: transform-box: content-box, border-box and stroke-box "invalid property value" Chrome Dev Tools
body: <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box" rel="nofollow noreferrer">MDN Web Docs</a> state that the following are all valid properties:</p>
  <pre><code>transform-box: content-box;
  transform-box: border-box;
  transform-box: fill-box;
  transform-box: stroke-box;
  transform-box: view-box;
  </code></pre>
  <p>It also states that all current (November 2021) browsers have full support, except IE11 of course. <a href="https://caniuse.com/?search=transform-box" rel="nofollow noreferrer">Caniuse.com confirms</a> this browser support for <code>transform-box</code>.</p>
  <p>However, when I attempt to use <code>transform-box: content-box;</code>, <code>transform-box: border-box;</code> or <code>transform-box: stroke-box;</code>, Chrome Dev Tools reports these as &quot;invalid property values&quot;:</p>
  <p><a href="https://i.stack.imgur.com/80deQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/80deQ.png" alt="Chrome Dev Tools displaying &quot;Invalid property value&quot;" /></a></p>
  <p>Am I missing something?</p>