CSS3 Border Image


I didn’t end up using this, but an image as a border is interesting. It’s a little trial and error for me still at this stage to get the pattern looking right.

The format is as reported by W3Schools, because I still use that resource. Eh.

border-image: source slice width outset repeat|initial|inherit;

Which became like so for me with the pear pattern you see at the top:

  border-top:100px solid #025c4c;
  border-image: url("stock_pears.png") 30% 1 1 repeat;

I ended up using a div after all, but maybe I’ll look at this option again in the future. The hex code for the border colour isn’t even right haha.