JSFiddle - React, Tailwind, and code Playground

HTML

<div class="eins"></div>
<div class="zwei"></div>
<div class="drei"></div>
<div class="vier"></div>
<div class="fuenf"></div>

CSS

body {
   font-family: sans-serif;
}
div {
  width: 150px;
  height: 150px;
  background-color: #333;
  float: left;
  margin: 20px;
  border: 30px solid;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  
}
.eins {
  border-image: linear-gradient(white, #4972A4) 10% round; 
}
.zwei {
   border-image: linear-gradient(45deg, white, #4972A4) 20% stretch;
}
.drei {
  
  border-image: linear-gradient(45deg, white, #4972A4) 10%  repeat;
 
}
.vier {
 
  border-image: radial-gradient(white, #4972A4) 20% round;
  
}
.fuenf {
 
  border-image: radial-gradient(green, white) 1% round;
  
}