Simulation of border opacity using SVG basics shapes

Implemented using stroke-* properties.

by David Partyka

HTML

<p>
Using SVG basic shapes
</p>
<svg viewBox="0 0 200 40" xmlns="http://www.w3.org/2000/svg">
<circle></circle>
<ellipse></ellipse>
<rect width="60" height="30"></rect>
</svg>

<p>
Using a &lt;div&gt;
</p>
<div class=a></div>
<br>
<p>Using a radial-gradient()</p> 
<div class=b></div>

CSS

svg > * {
  fill: red;
  stroke: blue;
  stroke-width: 5px;
  stroke-opacity: 0.4;
}

circle {
  cx: 20;
  cy: 20;
  r: 15;
}

ellipse {
  cx: 80;
  cy: 20;
  rx: 30;
  ry: 10;
}

rect {
  x: 125;
  y: 5;
}

p {
  text-align: center;
}

/* border + outline can achieve the same effect */
div {
  margin: auto;
  width: 200px;
  height: 100px;
 }
 
div.a {
  background: red;
  border: 5px solid purple;
  outline: 5px solid rgb(0 0 255 / 0.4);
}

div.b {
  background: radial-gradient(ellipse at center, red 50%, purple 50% 60%, rgb(0 0 255 / 0.4) 60% 70%, transparent 70%)
}