How do you apply a gradient from outer to inner, only to borders, in CSS?

Question

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 <div>'s are ugly as can be and don't make for a good reusable style component, but I don't know how else to approach this effect! Any guidance on what approaches to try to accomplish this would be greatly appreciated!

Here is a link to a pen demonstrating my current approach:

:root {
  --outer-battle-window-color-0: #7c7874;
  --outer-battle-window-color-1: #c8c4c0;
  --outer-battle-window-color-2: #ccc9cc;
  --outer-battle-window-color-3: #c9c9cb;
  --outer-battle-window-color-4: #c2c1c5;
  --outer-battle-window-color-5: #71767e;
  --outer-battle-window-color-6: #6b6e87;

  --battle-window-top-gradient-color: #6c70a6;
  --battle-window-middle-gradient-color: #21217c;
  --battle-window-bottom-gradient-color: #040136;

  --battle-window-border-radius: 5px;
}
html{
    font-family: "Final Fantasy 3/6 Font Regular", monospace;
    color: #ecedee;
    margin: 0px;
    padding: 0px;
    background-color: var(--battle-window-middle-gradient-color);
    text-shadow: 3px 2px #2d2a4b;
}
div{
    background-color: var(--battle-window-middle-gradient-color);
}
#outer-window-border-color_0{
    border-color: var(--outer-battle-window-color-0);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_1{
    border-color: var(--outer-battle-window-color-1);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_2{
    border-color: var(--outer-battle-window-color-2);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_3{
    border-color: var(--outer-battle-window-color-3);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_4{
    border-color: var(--outer-battle-window-color-4);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_5{
    border-color: var(--outer-battle-window-color-5);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_6{
    border-color: var(--outer-battle-window-color-6);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}

<div id="outer-window-border-color_0">
  <div id="outer-window-border-color_1">
    <div id="outer-window-border-color_2">
      <div id="outer-window-border-color_3">
        <div id="outer-window-border-color_4">
          <div id="outer-window-border-color_5">
            <div id="outer-window-border-color_6">
              This is a test of the borders!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/webDevelopmentSolutions/pen/zYvGWLO

Temani Afif · Accepted Answer · 2020-04-13T23:33:48.087

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

I really appreciate your response, if you would be so kind as to expand on this answer by putting inline comments for those of us who are unfamiliar with the intention behind some of these inline calculations, I'd love to choose your answer as the correct one! — cafeTechne, Apr 13 '20 at 19:24

cvjude · Answer 2 · 2022-08-05T12:36:24.197

I think you should use the border-image property and set it to a linear gradient and tweak it 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

example:

.div {
  color: pink;
  border: 10px solid pink;
  border-image: repeating-linear-gradient( 45deg, pink, pink 1%, purple 1%, purple 8%) 10;
}

source: https://css-tricks.com/almanac/properties/b/border-image/

How do you apply a gradient from outer to inner, only to borders, in CSS?

2 Answers2

Linked