JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<div class="border-box"></div>

<div class="border-box-2"></div>

CSS

.border-box {
   /*
     using deg instead of to left, to left top 
   */
   background-image: linear-gradient(0deg, hsl(10,50%,50%) 50%, hsla(50,50%,25%,0.5));
   

  /* A gradient going from the bottom to top,
     starting blue, turning green at 40% of its length,
     and finishing red 
    background-image: -webkit-linear-gradient(bottom, blue, green 40%, red);
    background-image: -moz-linear-gradient(bottom, blue, green 40%, red);
    background-image: -o-linear-gradient(bottom, blue, green 40%, red);
    background-image: linear-gradient(to top, blue, green 40%, red);
   */
   width: 80vw;  
   height: 70vh;
   margin: 15vh auto;
   border: 1px solid red;
 }
 
 .border-box-2 {
      width: 80vw;  
       height: 70vh;
       margin: 15vh auto;
       border: 15px solid red;
       /* image-source | height | width | repeat */
       border-image: url(https://previews.123rf.com/images/arturaliev/arturaliev1108/arturaliev110800038/10338514-Black-cats-silhouette-for-your-design-Stock-Vector-cat-border-paw.jpg) 30 30 repeat;
       /* https://www.youtube.com/watch?v=lpf-5mG9CGg */
 }