Inset box-shadow doesn't show below transparent border

by hakan

HTML

<p>According to MDN <i>”Inset shadows are drawn above background, but below border and content”</i> (see https://developer.mozilla.org/en/CSS/box-shadow). Wouldn't it be more accurate to say that it is drawn <em>inside</em> the border (equivalent to the <b>background-clip: padding-box</b> property for the background).</p>

<p>This example, where the border color is transparent, demonstrates my point.</p>

<p>By the way, the <b>background-clip</b> property doesn't affect the inset shadow.</p>

CSS

p {
    width: 300px;
    background-color: yellow;
    border: 30px solid transparent;
    padding: 10px;
    box-shadow: inset 0 0 10px black;
}