Kevin Powell - Community•2y ago

border radius is not working on Border-image-source

I'm trying apply gradient to border. Even if i apply border to wrapper or the gradient-image, border is not working. how should i solve this https://codepen.io/ahad4387/pen/RwqMJom

ahad4387

CodePen

gradient-image

...

4 Replies

mace•2y ago

this would be one option to achieve that effect:

body {
  background-color: black;
}

.white-gradient {
  position: relative;
  display: inline-block;
  background-color: grey;
  border-radius: 40px;
  padding: 100px;
 }

.white-gradient::after {
  position: absolute;
  content: "";
  inset: -2px;
  z-index: -1;
  background: linear-gradient(28.96deg, hsla(0, 0.00%, 10.98%, 0.00), hsla(0, 0.00%, 100.00%, 0.70));
  border-radius: 40px;
}

body {
  background-color: black;
}

.white-gradient {
  position: relative;
  display: inline-block;
  background-color: grey;
  border-radius: 40px;
  padding: 100px;
 }

.white-gradient::after {
  position: absolute;
  content: "";
  inset: -2px;
  z-index: -1;
  background: linear-gradient(28.96deg, hsla(0, 0.00%, 10.98%, 0.00), hsla(0, 0.00%, 100.00%, 0.70));
  border-radius: 40px;
}

Abdul Ahad⚡OP•2y ago

thank you. but in this method, it's not possible to get the borders?

body {
  background-color: black;
}

.white-gradient {
  display: inline-block;
  padding: 100px;
  border: 2px solid;
  border-image-source: linear-gradient(
    to bottom,
    rgba(28, 28, 28, 0),
    rgba(255, 255, 255, 0.7)
  );
  border-image-slice: 2;
  border-radius: 40px;
}

body {
  background-color: black;
}

.white-gradient {
  display: inline-block;
  padding: 100px;
  border: 2px solid;
  border-image-source: linear-gradient(
    to bottom,
    rgba(28, 28, 28, 0),
    rgba(255, 255, 255, 0.7)
  );
  border-image-slice: 2;
  border-radius: 40px;
}

Kevin Powell•2y ago

border-image doesn't work with border-radius. It's one or the other.

Abdul Ahad⚡OP•2y ago

okay got it, thank you

Gaming

Programming

border radius is not working on Border-image-source