border gradient

by Olcivek

HTML

<div class="div1">
  <div class="div2">
    <div class="div3">
      <div class="div4">
        <div class="div5">
          <div class="div6">
            <br>
            <br>
            <br>
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

:root {
  --color1: #8ebbfb;
  --color2: #769bd3;
  --color3: #5f7cad;
  --color4: #485d87;
  --color5: #313f61;
  --color6: #1a203b;
  --border-width: 10px;
}

body {
  max-width: 400px;
}

.div1 {
  border-left: var(--border-width) solid var(--color1);
  border-right: var(--border-width) solid var(--color6);
  border-top: var(--border-width) solid var(--color1);
  border-bottom: var(--border-width) solid var(--color6);
}

.div2 {
  border-left: var(--border-width) solid var(--color2);
  border-right: var(--border-width) solid var(--color5);
  border-top: var(--border-width) solid var(--color2);
  border-bottom: var(--border-width) solid var(--color5);
}

.div3 {
  border-left: var(--border-width) solid var(--color3);
  border-right: var(--border-width) solid var(--color4);
  border-top: var(--border-width) solid var(--color3);
  border-bottom: var(--border-width) solid var(--color4);
}

.div4 {
  border-left: var(--border-width) solid var(--color4);
  border-right: var(--border-width) solid var(--color3);
  border-top: var(--border-width) solid var(--color4);
  border-bottom: var(--border-width) solid var(--color3);
}

.div5 {
  border-left: var(--border-width) solid var(--color5);
  border-right: var(--border-width) solid var(--color2);
  border-top: var(--border-width) solid var(--color5);
  border-bottom: var(--border-width) solid var(--color2);
}

.div6 {
  border-left: var(--border-width) solid var(--color6);
  border-right: var(--border-width) solid var(--color1);
  border-top: var(--border-width) solid var(--color6);
  border-bottom: var(--border-width) solid var(--color1);
}

JavaScript

<>