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

Issue

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

Solution

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>

CSS border with linear-gradient

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>

CSS border-radius with gradient

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

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published