How Do You Apply A Gradient From Outer To Inner, Only To Borders, In CSS?

Based on the MDN documentation this doesn't seem to be explicitly supported. So I tried it as follows in the linked code pen below. I know the nested

's are ugly as can

Solution 1:

You can build it using multiple background:

.box {
  --r:15px;     /* radius   */
  --g:red,blue; /* gradient */
  
  border-radius:var(--r);
  padding:calc(var(--r) + 5px);
  background:
    /*corners*/
    radial-gradient(farthest-side at bottom right,var(--g)) top    left /var(--r) var(--r),
    radial-gradient(farthest-side at top    right,var(--g)) bottom left /var(--r) var(--r),
    radial-gradient(farthest-side at bottom left ,var(--g)) top    right/var(--r) var(--r),
    radial-gradient(farthest-side at top    left ,var(--g)) bottom right/var(--r) var(--r),
    /* borders*/
    linear-gradient(to top   ,var(--g)) top   /calc(100% - 2*var(--r)) var(--r),
    linear-gradient(to bottom,var(--g)) bottom/calc(100% - 2*var(--r)) var(--r),
    linear-gradient(to right ,var(--g)) right /var(--r) calc(100% - 2*var(--r)),
    linear-gradient(to left  ,var(--g)) left  /var(--r) calc(100% - 2*var(--r));
  background-repeat:no-repeat;
  
  width:150px;
  display:inline-block;
  display:inline-block;
  vertical-align:top;
  font-size:25px;
}

<div class="box"> Some text inside</div>

<div class="box" style="--r:10px;--g:black,orange,grey"> more text inside</div>

<div class="box" style="--r:30px;--g:green,blue,yellow">Some text inside</div>

If you want inner radius you can adjust like below:

.box {
  --r:10px;     /* radius   */
  --g:red 0%,blue; /* gradient */
  
  --rg:transparent 50%,var(--g);
  border-radius:calc(2*var(--r));
  padding:calc(2*var(--r) + 5px);
  background:
    /*corners*/
    radial-gradient(farthest-side at bottom right,var(--rg)) top    left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    right,var(--rg)) bottom left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at bottom left ,var(--rg)) top    right/calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    left ,var(--rg)) bottom right/calc(2*var(--r)) calc(2*var(--r)),
    /* borders*/
    linear-gradient(to top   ,var(--g)) top   /calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to bottom,var(--g)) bottom/calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to right ,var(--g)) right /var(--r) calc(100% - 4*var(--r)),
    linear-gradient(to left  ,var(--g)) left  /var(--r) calc(100% - 4*var(--r));
  background-repeat:no-repeat;
  
  width:200px;
  box-sizing:border-box;
  display:inline-block;
  vertical-align:top;
  font-size:25px;
}

<div class="box"> Some text inside</div>

<div class="box" style="--r:8px;--g:black 0%,orange,grey"> more text inside</div>

<div class="box" style="--r:20px;--g:green 0%,blue,yellow">Some text inside</div>

Related question to get diffent gradient with radius: Border Gradient with Border Radius

Solution 2:

I think you should use the border-image property and se it to a linear gradient and tweak until you have achieved what you want. After all css does treat linear-gradient() as an image. If you have an image of what you want to produce maybe I can help bring it to life. I hope this helps

Share