0

i have an element which is styled using an image-border using SVG. I would like to change the color of the SVG using CSS. The normal fill:color attribute works with direct paths and svg elements, but i can't manage to change the color of the image-border using fill.

my current code:

<div class="test">
test
</div>

and the css:

.test{
border-image-source: url("dots.svg");
border-width: 0 0 8px 0;
border-image-slice: 29% 29%; 
border-image-repeat: round;

fill: green;
}

How can i change the SVG color in image-border?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
fogx
  • 1,749
  • 2
  • 16
  • 38
  • 1
    I don't believe you can do that with what is effectively a background image only *inline* SVG - See - https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image – Paulie_D Apr 16 '19 at 09:48
  • In any case, the `fill` property is being applied to the `div` not the image in your CSS. – Paulie_D Apr 16 '19 at 09:51
  • ..and - https://stackoverflow.com/questions/45062089/style-border-image-svg-colors-from-css – Paulie_D Apr 16 '19 at 09:56
  • @Paulie_D fill is inherited. If the svg was inside the div, it would receive the style. Which it isn't with border-image – fogx Apr 16 '19 at 10:00
  • guess i will just have to use js to generate the svg then. thanks for the links – fogx Apr 16 '19 at 10:01

0 Answers0