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

HTML & CSS
1

Hi there,

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

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:

2

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

e.g.

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.

2 Likes
3

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
4

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