CODEWITHSUNDEEP
htmlcssbordertransparentlinear-gradients
dimann90
dimann90

Reputation: 43

Border not transparent with linear gradient

Why when I apply transparent border to div with linear-gradient, border is not transparent on top and bottom.

div {
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid transparent;

}

screenshot http://i43.tinypic.com/2r3gjmx.png

Upvotes: 4

Views: 4000

Answers (3)

visitor
visitor

Reputation: 161

For anybody who's looking for a solution:

TLDR 

background-origin: border-box;

Explanation https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Upvotes: 16

Heston Liebowitz
Heston Liebowitz

Reputation: 1685

@dimann90 has the correct solution in the comments. Use background-repeat: no-repeat on the element.

Here's why this works:

A background image repeats infinitely in the x and y directions by default. A linear-gradient is a background image, and the size of that image is controlled by the size of the content box (it's actually more complicated, but this is good enough for our purposes). An element's background extends through the padding and border (but not margin). So, a border will cause the total size of the element's box to be bigger than the generated background image, and it will repeat. If the border is transparent, then the repeating image will show through.

Upvotes: 7

Roy Sonasish
Roy Sonasish

Reputation: 4599

you need to use some thing like this

div{
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid rgba(0,0,0,0.3);
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

Upvotes: -1

Related Questions