CodePen Embed - SVG double border with CSS

<h1>With outline</h1>

<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-outline">
  <polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
  <rect x="200" width="100" height="100" fill="pink" stroke="red" />
  <circle cx="450" cy="50" r="50" fill="pink" stroke="red" />
</svg>

<h1>With box-shadow</h1>

<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-boxshadow">
  <polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="red"/>
</svg>

<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-boxshadow">
  <rect width="100" height="100" fill="pink" stroke="red" />
</svg>

<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="css-boxshadow">
  <circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>


body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }

.css-outline circle, .css-outline rect, .css-outline polygon {
  outline: 1px solid red;
  outline-offset: 4px;
}

.css-boxshadow, .css-boxshadow circle, .css-boxshadow rect, .css-boxshadow polygon {
  box-shadow: 0 0 0 3px antiquewhite, 0 0 0 4px red;
}

This Pen is owned by Mariana Beldi on CodePen.

See more by @marianab on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.