CSS - Constant size of border image

Question

DESCRIPTION: Im trying to get constant size of border image when resizing div. I'm thinking of solving this with pseudo elements, but is there way to make things easier?

HTML:

<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

CSS:

body {
  background: white;
}
#resizable {
  border: 25px solid !important;
  border-image: url(https://svgur.com/i/9c2.svg) 15 round !important;
  background: white
}

VISUAL:

JSFIDDLE: https://jsfiddle.net/3twuq14z/

Answer 1

Jus add this property to your svg file: vector-effect="non-scaling-stroke" to SVG path. Take a look at here (I re-uploaded your svg file): https://jsfiddle.net/dswLmaxo/