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

[glenn171]

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 { 
        width:250px;
	height:250px;
	border-radius:50%;	
	border:8px solid #whateverColorChoiceIChoose;
	border-image: url(nameOfMyImage.png) 30 round;
}

[SamA74]

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.

[glenn171]

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

[coothead]

Hi there glenn171,

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

You can view a fake example here…

http://coothead.co.uk/fake-circular-border/index.html

The relevant code may be found in the attachment…

fake-circular-border.zip (63.7 KB)

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

coothead