radial-gradient not working in border image source

Question

I need to set border background for element but it not working. Can someone please tell me how to fix it?

.boder{
  border: 2px solid;
  border-image-source: radial-gradient(80.38% 222.5% at -13.75% -12.36%, 
  #98F9FF 0%, rgba(255, 255, 255, 0) 100%),
  radial-gradient(80.69% 208.78% at 108.28% 112.58%, #EABFFF 0%, rgba(135, 
  38, 183, 0) 100%);
  boder-radius: 8px;
}

By the way, the spelling of ```border-radius``` in your code is wrong. — True Alpha, Dec 21 '21 at 07:33

score 2 · Answer 1 · answered Dec 21 '21 at 08:46

It seems that more than one image in a border-image-source is not supported (unlike in background-image). MDN for example mentions only one image as a possible value. An inspection using browser dev tools showed the border-image-source to have an invalid value.

To get round this, this snippet puts part of the border in a pseudo element positioned absolute relative to the element itself.

.boder {
  border: 2px solid;
  border-image-slice: 1;
  border-image-source: radial-gradient(80.69% 208.78% at 108.28% 112.58%, #EABFFF 0%, rgba(135, 38, 183, 0) 100%);
  width: 30vmin;
  height: 30vmin;
  position: relative;
  border-radius: 8px;
}

.boder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border: 2px solid transparent;
  border-image-slice: 1;
  border-radius: 8px;
  border-image-source: radial-gradient(80.38% 222.5% at -13.75% -12.36%, #98f9ff 0, rgba(255, 255, 255, 0) 100%);
}

<div class="boder"></div>

radial-gradient not working in border image source

1 Answers1