Can I set different color for border-left color and actual border-CodePudding

When I assign green color for border-left the same green color is assigned for the entire border. But I want border-left to be green and border to be black as the following screenshot.

This is my code(I use Tailwindcss)

<div className="border rounded flex items-center border-l-4 border-green">
    

  <div className="">
        <CalendarIcon className="h-4 mx-2" />
      </div>
      <div className="flex flex-col -space-y-1 p-1 ">
        <div className="text-xs flex text-gray-dark flex-start">
          <p>Checkout</p>
        </div>
        <DatePicker
          className=" border-none  font-bold h-1  rounded text-sm  outline-none  focus:ring-0 bg-transparent"
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          selectsEnd
          startDate={startDate}
          endDate={endDate}
          minDate={startDate}
          dateFormat="MMMM d, yyyy "
        />
      </div>
    </div>

This is the output

CodePudding user response：

I'm not sure I got the question correct. But can't you just use border-l-green-500 or something like that? It works for me in the tailwind playground.