Cannot provide border after clip-path usage

I have this as required design:

All 6 figures you see are buttons and they must have different title. The design however is almost identical except bg-color. So I created my styled-btn component:

interface StyledBtnProps {
  title: string;
  transaction?: boolean;
}

const ScreenBtn: React.FC<StyledBtnProps> = ({
  title,
  transaction = false,
}) => {
  return (
    <button
      className={clsx(
        "relative  p-6 w-96 h-1/3 text-2xl flex justify-center gap-4 mt-20",
        "clip-trapezoid",
        {
          "bg-red-600 text-white": transaction,
          "bg-white text-red-600 border border-red-600": !transaction,
        }
      )}
    >
      <div className="">
        <InboxArrowDownIcon className="w-8 h-8" />
      </div>
      <span className="uppercase">{title}</span>
    </button>
  );
};

I use additional created class in my globals.css to create the polygon:

.clip-trapezoid {
  position: relative;
  clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0% 100%, 0% 15px);
}

.clip-trapezoid::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid red;
  clip-path: "inherit";
  z-index: -1;
}

The problem is that the pseudo class is not working. I again cannot see the red border for the cropped corners. This is the actual result:

How to fix that?