<!DOCTYPE html>
<style>
  .group {
    float: left; width: 180px;
  }

  div.item {
    margin: 10px 0 20px 10px;
    outline: 4px solid black;
    outline-offset: -10px;
    background-color: blue;
    display: block;
    height: 100px;
    width: 100px;
  }
</style>

<body>
All the replaced elements below should have a solid black inset outline.<p>

<div class="group">
 &lt;video&gt;
  <div class="item"></div>
 &lt;canvas&gt;
  <div class="item"></div>
 &lt;media&gt;
  <div class="item"></div>
</div>

<div class="group">
 &lt;iframe&gt;
  <div class="item"></div>
 &lt;object&gt;
  <div class="item"></div>
</div>

<div class="group">
 &lt;input type=image&gt;
  <div class="item"></div>
 &lt;img&gt;
  <div class="item"></div>
</div>

</body>