Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style> 
circle {
  paint-order: stroke fill;
}
</style>
</head>
<body>
<h1>paint-order: stroke fill</h1>
<p>Default is to paint the circle with fill first, then stroke. Here, the order is reveresed, and so the outcome is different:</p>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="10" fill="yellow" />
</svg>
<p><strong>Tip:</strong> Try to reverse the order of fill and stroke, or remove paint-order property entirely and paint-order becomes the default order.</p>
</body>
</html>