Kevin Powell - Community•3w ago

Custom border in css

I am trying to make a custom border in style. I need the box to be like in first pic. I tried tweaking border radius but its not matching as per design, can someone help me with it. codesandbox link: https://codesandbox.io/p/sandbox/xzzh99 Here's the code i tried

    <div
      style={{
        height: "100vh",
        background: "#7047EE",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          background: "#fff",
          height: "30px",
          display: "grid",
          placeItems: "center",
          padding: "0px 10px",
          borderRadius: "0px 0px 10px 10px",
        }}
      >
        <div style={{ fontWeight: "bold" }}>IN 2HR </div>
      </div>
    </div>

    <div
      style={{
        height: "100vh",
        background: "#7047EE",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          background: "#fff",
          height: "30px",
          display: "grid",
          placeItems: "center",
          padding: "0px 10px",
          borderRadius: "0px 0px 10px 10px",
        }}
      >
        <div style={{ fontWeight: "bold" }}>IN 2HR </div>
      </div>
    </div>