CODEWITHSUNDEEP
htmlcss
cogm
cogm

Reputation: 285

Transparent border-image flips the gradient of underlying background-color?

I'm trying to add a border-image to an a tag that already has a gradient background-color, and I'm finding that the top and bottom bits of the border are rendering the gradient incorrectly. Here's a snippet:

#button {
  padding: 1.5vh 3vw;
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center;

  background: linear-gradient(to bottom, #A6E8B3, #3DBD8F);

  border: 10px solid;
  border-image: url('https://mdn.mozillademos.org/files/4127/border.png') 30;
  border-image-repeat: round;
  border-radius: 1vw;
}
<a id="button">Button</a>

My intention is to have the entire rounded area be one smooth gradient bottom to top, with the border going around the edge. Doesn't seem to affect the parts of the background behind the left or right borders, just the top and bottom.

Thanks.

Upvotes: 1

Views: 112

Answers (1)

C3roe
C3roe

Reputation: 96424

The problem is that adding border: 10px solid; changes what exactly that background image is applied to - by default that is the padding box of the element. The added border creates space outside of that padding box, but still within the bounds of the whole element, so that your gradient gets repeated in those areas.

So you can fix this by explicitly specifying that you want the whole border box to be the background positioning area, using background-origin: border-box;

#button {
  padding: 1.5vh 3vw;
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center;

  background: linear-gradient(to bottom, #A6E8B3, #3DBD8F);

  border: 10px solid;
  border-image: url('https://mdn.mozillademos.org/files/4127/border.png') 30;
  border-image-repeat: round;
  border-radius: 1vw;
  background-origin: border-box;
}
<a id="button">Button</a>

Upvotes: 1

Related Questions