CODEWITHSUNDEEP
htmlcss
Levi_OP
Levi_OP

Reputation: 969

Using borders on elements that have a linear gradient backgrounds causing solid colors on edges

When creating a span element that has a linear background, and no border, everything works fine.

element without border

But as soon as I add a border, the colors from the gradient become solid and just sit on the edges.

element with border and color clipping

Increasing the border size mitigates the issue, but I have found no way to completely remove the problem without increasing the border width or removing the border.

element with much larger border

CSS for the element:

background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;

Upvotes: 0

Views: 47

Answers (2)

Suraj Sanwal
Suraj Sanwal

Reputation: 790

The starting and ending points of the gradient are at the edges of the padding-box and border. That's why as soon as you add a border, the colors from the gradient become solid and just sit on the edges.

Using box-shadow:inset will fix the issue. See the updated CSS below.

background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
box-shadow: inset 0 0 0 3px black;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 
1px black;

Upvotes: 0

Hoch
Hoch

Reputation: 518

i can't simulate it, so, my suggestion is to change from border to box-shadow: check the snippet below:

span{
  background: linear-gradient(45deg, #0000ff, #ff0000);
  color: white;
  border-radius: 3px;
  padding: 3px;
  font-size: 50px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
}

.border{
  border: 3px solid black;
}

.box-shadow{
    box-shadow: 0px 0px 0px 3px black;
}
<span class="border">My Contributions</span>
<br/> <br />
<span class="box-shadow">My Contributions</span>

Upvotes: 1

Related Questions