CSS border gradient color All In One

CSS Gradient Borders

font-family: system-ui;

button {
  background: none;
  text-decoration: inherit;
  font-family: system-ui;
  font-size: 1rem;
  padding: 1rem 2rem;
}

.border-gradient {
  // border: 5px solid;
  border-width: 5px;
  border-style: dashed;
}
.border-gradient-purple {
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.border-gradient-green {
  border-image-source: linear-gradient(to left, #00C853, #B2FF59);
}
.border-image-slice{
  border-image-slice: 1;
}

See the Pen CSS Gradient Borders by xgqfrms
(@xgqfrms) on CodePen.

See the Pen CSS3 box-shadow : 4 sides symmetry by xgqfrms
(@xgqfrms) on CodePen.

border-image:
    border-image-source: linear-gradient(to left, rgb(116, 58, 213), rgb(213, 58, 157));
    border-image-slice: 100%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;

border: 10px solid;
    border-top-color: initial;
    border-top-style: solid;
    border-top-width: 5px;
    border-right-color: initial;
    border-right-style: solid;
    border-right-width: 5px;
    border-bottom-color: initial;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-left-color: initial;
    border-left-style: solid;
    border-left-width: 5px;
    border-image-source: initial;
    border-image-slice: 1;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;

background: none;
    background-image: none;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;