コピペで使えるCSSのborder-image-sourceでグラデーション境界線デザイン

CSSのborder-image-sourceでボーダー（縁）にグラデーションを適用する

cssのborder-image-sourceプロパティでlinear-gradientを使ってグラデーションを適用することが出来ます。

ボーダーに線形グラデーションを適用

<div class="lg">線形グラデーション</div>
<style>
.lg{
  max-width:100%;  width:600px；
  border:2px solid;
  border-image-slice:1;
  border-image-source:linear-gradient(135deg,yellow,green);
}
</style>

ボーダーに線形グラデーションでアニメーション適用

ボーダーに線形グラデーションを適用
（滑らかには動かないので下にあるJavascript版を推奨）

<div class="border-ani">線形グラデーション＋アニメーション</div>
<style>
.border-ani{
  max-width:100%;
  width:600px;
  border:2px solid;
  border-image-slice:1;
  animation: border-ani 2.0s linear 0.0s infinite normal both running;
}
@keyframes border-ani{
    0%{border-image-source:linear-gradient(0deg,yellow,green);}
   10%{border-image-source:linear-gradient(36deg,yellow,green);}
   20%{border-image-source:linear-gradient(72deg,yellow,green);}
   30%{border-image-source:linear-gradient(108deg,yellow,green);}
   40%{border-image-source:linear-gradient(144deg,yellow,green);}
   50%{border-image-source:linear-gradient(180deg,yellow,green);}
   60%{border-image-source:linear-gradient(216deg,yellow,green);}
   70%{border-image-source:linear-gradient(252deg,yellow,green);}
   80%{border-image-source:linear-gradient(288deg,yellow,green);}
   90%{border-image-source:linear-gradient(324deg,yellow,green);}
  100%{border-image-source:linear-gradient(360deg,yellow,green);}
}
</style>

ボーダーに扇型グラデーションを適用(IE不可)

ボーダーに扇型グラデーションを適用させる

<div class="cg">扇型グラデーション</div>
<style>
.cg{
  max-width:100%;  width:600px;
  border:2px solid;
  border-image-slice:1;
  border-image-source:conic-gradient(from -45deg,yellow,green,yellow);
}
</style>

ボーダーに扇型グラデーションをアニメーション表示させる(IE不可)

<script>
  TMamBorderConicAnimation=function(elms,colors,width,stepDeg){
    this.deg=0;          //最初の角度
    this.stepDeg=stepDeg;//回転角度のインクリメント値
    this.colors=colors;  //線形画像の色のパターン
    this.timer=null;
    this.elms=elms;
    this.width=width;
    this.ani=function(){
      for(let i=0;i<elms.length;i++){
        elms[i].style.borderImageSlice='1';
        elms[i].style.borderImageSource='conic-gradient(from '+this.deg+'deg at 50% 50%, '+this.colors+')';
      }
      this.deg+=this.stepDeg;
      if(this.deg>=360){this.deg=0;};
    }
    this.init=function(){
      for(let i=0;i<elms.length;i++){
        elms[i].style.border=this.width+" solid";
      }
      this.timer=setInterval(this.ani.bind(this),33);
    }
    this.init();
  }
</script>
<style>
.base{
  max-width:100%;  width:400px;
}
</style>

使用例1

例1

<div class="cg1">例1<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
  MamBorderAnimation=new TMamBorderConicAnimation(
    document.querySelectorAll(".cg1"),
    "yellow,green,yellow", //グラデーションパターン
    "2px",                 //ボーダーの太さ
    8                      //回転速度(deg)
  );
});
</script>

使用例2

例2

<div class="cg2">例2<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
  MamBorderAnimation=new TMamBorderConicAnimation(
    document.querySelectorAll(".cg2"),
    "cyan,magenta,yellow,cyan",//グラデーションパターン
    "2px",                     //ボーダーの太さ
    4                          //回転速度(deg)
  );
});
</script>

使用例3

例3

<div class="cg3">例3<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
  MamBorderAnimation=new TMamBorderConicAnimation(
    document.querySelectorAll(".cg3"),
    "white,black,black,black,black,black,white",//グラデーションパターン
    "1px",                     //ボーダーの太さ
    2                          //回転速度(deg)
  );
});
</script>

使用例4

例4

<div class="cg4">例4<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
  MamBorderAnimation=new TMamBorderConicAnimation(
    document.querySelectorAll(".cg4"),
    "white,silver,silver,silver,silver,white",//グラデーションパターン
    "4px",                     //ボーダーの太さ
    8                          //回転速度(deg)
  );
});
</script>