Can you use border-image and border-color on the same border property using css

I have a round circular border, and would like to add a star image (transparent backround png) to it, I know of the border-image property and was thinking I would use that for my stars, I want the actual border color to be versatile. Is this possible? the docs on border-image aren’t really clear on this.

The css I envision would look like this:

#circle { 
	border:8px solid #whateverColorChoiceIChoose;
	border-image: url(nameOfMyImage.png) 30 round;

I think the border image will override any border-color that you apply.
You would probably need a pseudo element to hold a background colour to get the effect.
That is if adding the background to the actual border image is not an option.

Thanks! That’s what I suspected. Appreciate you taking the time to answer. Saved me a lot of work for nothing too.

Hi there glenn171,

if you can’t do it one way, then do it another or just fake it. :wonky:

You can view a fake example here…

The relevant code may be found in the attachment… (63.7 KB)

Always wemember that “necessity is the mother of invention”. :winky:


1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.