Striped or Candy Cane border (with stars if possible)?

Hi there,

I am trying to create this effect around a responsive box on my page:

I have seen it is possible to achieve using stripes in CSS, but don’t know how to do this. Plus I don’t know if it is possible to add the stars seem in the example. I’m guessing I will just need to use some absolute positions images?

This is a fiddle and I am trying to place the border on the top right box in green.

Can anyone tell me the best way to do this?

Thanks :slight_smile:

You could do the stripes with a repeating linear gradient as a border-image.


You could probably do the whole thing with stripes and stars with border-image if you can construct an image properly.

However border-image is pretty tricky and may be easier just to absolutely place your stars into position.


Thank you @PaulOB, that is exactly what I was looking for :slight_smile:

Yes, I think I will add the stars with some absolutely positioning

1 Like