JSFiddle - React, Tailwind, and code Playground

HTML

<p id="border1">In this section image is given as the border </p>
  <p id="border2">In this section different colors are given on all sides of border</p>
  <p id="border3">In this section the border will be rounded from right corner</p>

CSS

#border1 {
      border: 15px solid transparent;
  padding: 10px;
  border-image-source: url("http://www.w3resource.com/includes/img/border1.png");
  border-image-repeat: round;
  border-image-slice: 30;
  border-image-width: 20px;
  }
#border2 { 
  border-style: solid;
    border-color: #ff0000 #0000ff #ff0080 #00ffff;
    padding: 20px 10px;
  }
  #border3 {
    border: 3px solid #FF0000;
    padding: 10px 20px; 
    background: #00CCCC;
    border-top-right-radius: 3em;
}