<h1>With SVG filters</h1>

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible">
  <defs>
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
      <feFlood flood-color="red" result="outside-color"/>
      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
      <feComposite in="outside-color" operator="in" result="outside-stroke"/>

      <feFlood flood-color="antiquewhite" result="inside-color"/>
      <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>

      <feMorphology in="SourceAlpha" radius="2"/>
      <feComposite in="SourceGraphic" operator="in" result="fill-area"/>

      <feMerge>
        <feMergeNode in="outside-stroke"/>
        <feMergeNode in="inside-stroke"/>
        <feMergeNode in="fill-area"/>
      </feMerge>
    </filter>
  </defs>
  <polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red" stroke-width="4" filter="url(#inset)"/>
  <rect x="200" width="100" height="100" fill="pink" stroke="red" stroke-width="3" filter="url(#inset)" />
  <circle cx="50" cy="50" r="50" transform="translate(400)" fill="pink" stroke="red" stroke-width="4" filter="url(#inset)" />
</svg>

<h2>Simpler</h2>
<svg viewBox="0 0 100 100" width="100" height="100" overflow="visible">
     <filter id="outline">
        <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="1"/>
        <feFlood flood-color="red"/>
        <feComposite in2="expanded" operator="in"/>
        <feComposite in="SourceGraphic"/>
    </filter>
  
    <polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="antiquewhite" stroke-width="4" filter="url(#outline)"/>
  <rect x="200" width="100" height="100" fill="pink" stroke="antiquewhite" stroke-width="3" filter="url(#outline)" />
  <circle cx="50" cy="50" r="50" transform="translate(400)" fill="pink" stroke="antiquewhite" stroke-width="4" filter="url(#outline)" />
</svg>