CODEWITHSUNDEEP
css
maxisme
maxisme

Reputation: 4245

How to add clipping to border and text, not just text?

I am able to mask my <h1> text with an image like this:

h1{
  border: #efefef 5px solid;
  padding: 0.5em;

  /* clipping */
  background:url('https://s-media-cache-ak0.pinimg.com/736x/63/69/00/63690009a5fabbf80b921696218cba3f.jpg');
  background-repeat:repeat-x;
  background-position:0 0;
  -webkit-font-smoothing:antialiased;
  -webkit-background-clip:text;
  -moz-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

See JSFiddle

Which works perfectly on just the text I would also like to have the image mask over the border too is that possible and if so how do I do it?

Upvotes: 0

Views: 52

Answers (1)

Alfredo Lanzetta
Alfredo Lanzetta

Reputation: 314

Try it. Hope can help

border-image: url('https://s-media-cache-ak0.pinimg.com/736x/63/69/00/63690009a5fabbf80b921696218cba3f.jpg') 30 round;

Upvotes: 1

Related Questions