JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">text</div>

CSS

.block {
    width: 100px;
    height: 100px;
    
    position: relative;
    
    border: 5px solid #000;
    
    text-align: center;
    line-height: 100px;
}

.block:before {
    content: "";
    
    position: absolute;
    top: 0;    left: 0;
    bottom: 0; right: 0;
    
    z-index: -1;
    
    background-color: #aaa;
    border: 5px solid;
    border-image: linear-gradient(0deg, green, blue) 1;
}